javascript - 如何从父级上取消div的钩子(Hook)然后将其钩回来？

Question

<div id='parent'>
    <div id='child'></div>
</div>

我想将 child 从 parent 身上解开。然后对子级进行一系列不同的 dom 操作，然后将其挂回父级 - 这样浏览器只执行一次回流(而不是每次我在子级中更改某些内容时都进行回流)。我怎样才能做到这一点？

var child = document.getElementById('child');
var parent = document.getElementById('parent');

child.parent = null; // something like this
//.... // do a bunch of edits to the child then
child.parent = parent; // to set it back

Answer 1

您可以克隆原始节点，进行所需的更改，删除原始节点并添加更改的节点。

var button = document.getElementById('mybutton');
  button.addEventListener('click', function() {
    var parent = document.getElementById('parent');
    var child = document.getElementById('child');
    
    var clone = child.cloneNode(true);
    clone.innerHTML = '<p><strong>Changes</strong></p>';
    
    child.remove();
    parent.appendChild(clone);
  });

<div id='parent'>
    <div id='child'>Original</div>
</div>
<button id='mybutton'>Click me</button>