javascript - 我可以在保留实例/状态的同时移动 iframe 吗？

Question

如果我有一个在节点上设置的 iframe，我可以在保留其当前状态的同时将其移动到另一个节点吗？

我必须保留对此的 IE11 支持

const iframe = document.querySelector('#my-frame')

document.querySelector('#new-node').appendChild(iframe)
document.querySelector('#old-node').removeChild(iframe)

div{
  border: 1px dashed black;
}

<div id="old-node">
  Old node
  <iframe id="my-frame" src="https://example.com"></iframe>
</div>
<div id="new-node">
  New node
</div>

标签： javascripthtmldom

Answer 1

你几乎是对的。

但是，由于 DOM 元素一次只能有一个父元素，因此.appendChild会自动从其当前父元素中删除该元素（如果它已经在 DOM 中）。

因此，在您的情况下，当您调用 时.removeChild，该元素不再是旧父级的子级，并.removeChild抛出一个DOMException.

你有两种方法：

• 将呼叫移至.removeChild之前.appendChild：

  const iframe = document.querySelector('#my-frame')
  
  document.querySelector('#old-node').removeChild(iframe)
  document.querySelector('#new-node').appendChild(iframe)
  

• 但是，您甚至可以省略对以下的调用.removeChild：

  const iframe = document.querySelector('#my-frame')
  
  document.querySelector('#new-node').appendChild(iframe)