Question

我听过很少的方法：

我可以简单地遍历20k元素并执行appendChild。
我可以将所有项目插入到js中新创建的div中，然后将该div放入父dom中。
还有其他方法吗？复制html批发？

然而，我很困惑如何做2.将所有子元素从div A移动到div B而不迭代所有子元素的最佳方法是什么。

Answer 1

您还可以使用随时附加所有内容的文档片段

  var fragment = document.createDocumentFragment();
  fragment.appendChild(...)
  fragment.appendChild(...)
  ...
  element.appendChild(fragment)

Answer 2

根据this source，最快的是简单地遍历元素并附加它们。

远比创建随机div更好的是创建一个文档片段并附加到该片段。然后，可以将所述片段添加到dom

var fragment = document.createDocumentFragment()
arr.forEach(el => fragment.appendChild(el))
element.appendChild(fragment)

我制作了一个jsPerf，其中包含有关这两者中哪一个更快的实验。看来使用文档片段与我的有限测试（一个浏览器，一个操作系统）的原始附加相同

Answer 3

为什么不在深度模式中使用 cloneNode() ：

// Copy the element and its child nodes
var cln = itm.cloneNode(true);

// Append the cloned element to the new div with id="new_div"
document.getElementById("new_div").innerHTML(cln);

希望这有帮助。

将元素从数组插入现有Html元素的有效方法是什么？

3 个答案: