移动 DOM 元素而不丢失状态

Web 功能： moveBefore()

使用 appendChild() 或 insertBefore() 等传统方法重新设置 DOM 元素的父级时，浏览器会隐式地从 DOM 中移除该元素，然后将其插入到新位置。这种“移除并插入”操作会重置许多内部状态，导致 <iframe> 元素重新加载、CSS 动画重新启动以及输入字段失去焦点。

如需在移动元素的同时保留其状态，请使用 moveBefore() API。此方法会执行原子移动，完全绕过移除和插入步骤。

移动具有状态的元素

moveBefore() 的使用方式与 insertBefore() 完全相同。它需要两个参数：要移动的节点，以及要插入其前面的参考节点（或 null，以附加到新父节点的末尾）。

const newParent = document.getElementById('new-parent');
const elementWithState = document.getElementById('iframe-or-focused-input');

// MANDATORY: Use moveBefore to preserve state. 
// Passing null as the second argument appends the element to the end of newParent.
newParent.moveBefore(elementWithState, null);

移动自定义元素（Web 组件）

如果您使用 moveBefore() 移动自定义元素，则不会触发其 connectedCallback 和 disconnectedCallback 生命周期方法。

如果您的自定义元素需要在移动时执行特定逻辑，请在自定义元素定义中实现 connectedMoveCallback() 方法。

class MyCustomElement extends HTMLElement {
  connectedCallback() {
    // Runs on initial insertion.
  }
  
  connectedMoveCallback() {
    // Runs when the element is moved via moveBefore().
    // Use this to update state that depends on the new DOM location.
  }
}

后备策略

由于 moveBefore() 是一种渐进增强功能，因此您必须在调用它之前使用功能检测，并针对旧版浏览器回退到传统的 insertBefore() 或 appendChild() 操作。

const targetParent = document.getElementById('target-container');
const nodeToMove = document.getElementById('moving-element');

// Check if moveBefore is supported on the Element prototype
if ('moveBefore' in Element.prototype) {
  targetParent.moveBefore(nodeToMove, null);
} else {
  // Fallback: traditional move. 
  // Note: This WILL reset <iframe>, animation, and focus state in unsupported browsers.
  targetParent.insertBefore(nodeToMove, null);
}