Javascript 多个DOM子项的速度/效率

我必须在一个命中容器A中创建七个div元素，其中包含A1、A2、A3和A4，然后在A2中创建A2a和A2b。我对这个小函数使用多个调用：

function u1(t,i,c,p){ // type,id,class_name,parent_id
    var tag=document.createElement(t); // Create node to be appended
    tag.id=i;
    tag.className=c;
    document.getElementById(p).appendChild(tag);
}

我的问题是：是否有一种更省时的方法将这七个绑定在一起，然后只执行一个DOM追加？或者innerHTML是一个不错的选择

---

谢谢：）

您可以使用

.innerHTML

。另一种方法是使用文档片段：

var fragment = document.createDocumentFragment();

function u1(t, i, c){ // type,id,class_name
    var tag = document.createElement(t); // Create node to be appended
    tag.id = i;
    tag.className = c;
    fragment.appendChild(tag); // will use `fragment` from the outer scope
}

// call u1() seven times

// then insert all the elements into the DOM all at once
document.getElementById('foo').appendChild(fragment);

文档片段的创建有点慢，但从长远来看可以节省性能。例如，在本例中，从7个DOM插入变为一个DOM插入。（任何涉及DOM的东西在JavaScript中都很慢。）

---

如果您想使用这两种方法对您的特定用例进行基准测试，.

如果您必须对代码进行注释，以解释您的函数参数是什么，那么您将它们命名得很糟糕。重点是。我真的不需要说出他们的名字。原来的代码有全名，我只是在整理的时候剪贴的。顺便说一句，我不确定20年后你是否会对它感到如此兴奋：）+1在

.innerHTML

警察到来之前我发来的；-）不管怎样，我还是会使用文档片段的方法。您应该补充一点，JS中最慢的是DOM操作（不考虑重新渲染）。这就是为什么只添加一个节点会比添加七个节点快，即使它们更小。感谢所有这些，尤其是jsPerf的领先优势。我一直在想，最近我怎样才能对东西进行基准测试。非常感谢您的帮助：）@MathiasBynens-我无法让嵌套片段工作！我可以创建一个片段，附加子元素并将其添加到DOM中。但是我如何将子元素添加到片段中的子元素呢？对于未来的任何人来说：我最后一条评论中关于嵌套问题的答案如下：）