javascript - 在 dom 中移动 div 的最快方法是什么？

Question

在 dom 中移动 div 时我有点迷茫。我基本上需要改变一些div的顺序。我应该删除它然后以某种方式重新插入它，还是有更好的方法将它移动到 dom 树中。

感谢您的任何见解。

Answer 1

如果您只需要移动它，并且不需要使用 JavaScript 对元素进行任何触发回流的更改，只需使用appendChild().

另一方面，如果您需要对元素进行更改，更新其属性或“物理”尺寸会触发文档重排，那么值得将其从 DOM 中删除并进行更改，然后使用appendChild()或重新插入insertBefore()。

请记住，已经存在一个文档重排，只需重新定位元素，但如果要进行任何其他更改，则尝试在重新插入之前将元素/节点作为 documentFragment 进行“幕后”操作。

参考：

• appendChild().
• insertBefore().

Answer 2

您不需要删除它，您可以使用appendChildorinsertBefore或 jQuery 方法重新定位节点，例如insertAfter, 等。

例如：

var newOrder = ['id2', 'id1', 'id4', 'id3'];
var container = document.getElementById('container');

for(var i = 0, l=newOrder.length; i<l; i++) {
    container.appendChild(document.getElementById(newOrder[i]));
}

这会将具有 id 的节点移动id*到容器的末尾，但按照定义的顺序newOrder