javascript - createElement + createTextNode oneliner？

Question

我要向表中添加几千行，因此我需要 native javascript 的速度。

目前我正在使用:

nThName = document.createElement("TH");
nThName.appendChild(document.createTextNode(workers[i].name));
nTr.appendChild(nThName);

有没有办法在一行中完成此操作(不会损失任何性能？)所以我不需要 nThName 变量？

每行有超过 50 个单元格，所以我更喜欢:

nTr.appendChild(document.createElement("TH").appendChild(document.createTextNode(workers[i].name)));

但这行不通..显然

Answer 1

那么，您正在寻找性能？单行线对此无济于事。但是，使用文档片段和克隆节点确实有帮助。但它需要更多的代码。

var table = document.getElementById('t');
var tr = table.querySelector('tr');
var th = document.createElement('th');
var clone;

var df = document.createDocumentFragment();

for (var i = 0; i < 100; i++) {
    // Performance tip: clone a node so that you don't reuse createElement()
    clone = th.cloneNode();
    clone.appendChild(document.createTextNode('hello' + i));

    // Performance tip: append to the document fragment
    df.appendChild(clone);
}

// Performance tip: append only once in the real DOM
tr.appendChild(df);

参见 jsfiddle 演示:http://jsfiddle.net/3KGwh/3/

文档片段基本上是迷你 DOM，方法有限。它们很棒，因为它们可以让您获得出色的性能，并且您可以将单个元素附加到真实的 DOM。