随着
Web 应用的日益复杂，开发者对 DOM 操作的灵活性和效率提出了更高的要求。最近，Chrome 浏览器在 133 版本中引入了一个全新的 DOM 操作方法——moveBefore，这一创新功能为前端开发带来了新的可能性。
什么是
moveBefore
？
moveBefore
是
Chrome 133+
新增的一个 DOM 操作方法，其核心功能是能够在
移动 DOM 元素
时
保留元素的当前状态
。
这听起来可能是一个小小的改进，但实际上，它解决了传统 DOM 操作中一个长期存在的痛点。
在传统的 DOM 操作中，移动一个元素通常需要先使用
removeChild
方法将其从父节点中移除，然后再使用
insertBefore
或其他方法将其插入到新的位置。
然而，这种操作方式会导致元素的状态丢失。例如：
-
如果移动的是一个正在播放的视频（嵌入在 iframe 中），视频会重新加载；
-
如果移动的是一个处于焦点状态的输入框，焦点会被丢失；
-
如果移动的是一个正在执行 CSS 动画的元素，动画可能会中断。
而
moveBefore
方法的出现，完美地解决了这些问题。
moveBefore
语法介绍
moveBefore
的语法与
insertBefore
非常相似，这使得开发者可以轻松地将现有代码迁移到新的方法上。其基本语法如下：
parent.moveBefore(node, referenceNode);
-
-
-
referenceNode
是移动后 node 的前一个兄弟节点。如果 referenceNode 为 null，则 node 会被移动到 parent 的子节点列表的末尾。
例如，假设我们有一个 DOM 结构如下：
<div id="container">
<p id="item1">Item 1p>
<p id="item2">Item 2p>
div>
如果我们想将
item1
移动到
item2
的后面，可以使用以下代码：
const container = document.getElementById('container');
const item1 = document.getElementById('item1');
const item2 = document.getElementById('item2');
container.moveBefore(item1, item2.nextSibling);
执行这段代码后，DOM 结构将变为：
<div id="container">
<p id="item2">Item 2p>
<p id="item1">Item 1p>
div>
可以看到，
moveBefore
的使用非常直观，与我们熟悉的
insertBefore
方法类似，但它的优势在于能够
保留元素的状态
。
保留元素状态的优势
moveBefore
的最大亮点在于它能够在移动 DOM 元素时保留其状态。这在许多场景下都具有重要的意义。
例如：
视频播放场景
对于嵌入在网页中的视频（如通过
iframe
嵌入的视频），传统的方法在移动 iframe 时会导致视频重新加载。这不仅会中断用户的观看体验，还可能增加服务器的负担。
而使用
moveBefore
方法移动
iframe
时，视频会继续播放，用户体验不会受到任何影响。
使用场景
moveBefore
方法的出现为前端开发带来了更多的灵活性和可能性。
以下是一些典型的应用场景：
-
拖放操作
：拖放操作是现代 Web 应用中常见的交互方式之一。例如，在一个任务管理应用中，用户可以通过拖放操作将任务从一个列表移动到另一个列表。使用 moveBefore 方法，开发者可以确保任务卡片在移动过程中保持其状态，如任务卡片上的动画效果、焦点状态等。
