Question

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

我想把孩子从父母那里取下来。然后对孩子进行一系列不同的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

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

╔═════════════╦═════╦════╦═════╦════╦════╦════╗
║     URL     ║  d1 ║ d2 ║ d3  ║ d4 ║ d5 ║ d6 ║
╠═════════════╬═════╬════╬═════╬════╬════╬════╣
║ example.com ║ 400 ║ 11 ║ 2.2 ║ 55 ║ 68 ║ 90 ║
╚═════════════╩═════╩════╩═════╩════╩════╩════╝

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);
  });

Answer 2

你可以用简单的方式做，使用纯粹的javascript，

// This line you have the div chil
var child = document.getElementById ("child");
// This line you catch who is his father
  var parent = child.parentNode;
// This line the parent removes the child
     parent.removeChild (child);
// A function that will return the child in 5/2
setTimeout (function () {
   parent.appendChild (child);
}, 5000);

Answer 3

您可以使用Node.removeChild（）方法删除子节点，它会从DOM中删除子节点。返回已删除的节点语法var oldChild = node.removeChild(child);

child是要从DOM中删除的子节点。
node是child的父节点。

oldChild包含对已删除子节点的引用。 oldChild ===孩子。已删除的子节点仍存在于内存中，但不再是DOM的一部分。您可以稍后在代码中重用已删除的节点，以通过oldChild对象引用追加回父节点。

删除指定的元素而不必指定其父节点

 var node = document.getElementById("nested");
 if (node.parentNode) {
 node.parentNode.removeChild(node);
 }

从元素中删除所有子项

var element = document.getElementById("top");
 while (element.firstChild) {
 element.removeChild(element.firstChild);
 }

然后，您可以使用Node.appendChild()将oldchild追加回父节点。注意：Node.appendChild()方法将节点添加到指定父节点的子节点列表的末尾。

如何从父母取消div然后将其挂钩？

3 个答案: