createElement + createTextNode oneliner？

Question

我在表中添加了几千行,所以我需要本机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中.

Answer 2

可以这样做，例如：

document.body.appendChild(
    document.createElement('div').appendChild(
        document.createTextNode('hello')
    ).parentNode
);

JS Fiddle 代表演示。

我认为这只是你的链接方法被关闭了；给定您的特定演示代码：

nTr.appendChild(
    document.createElement('th').appendChild(
        document.createTextNode(workers[i].name)
    ).parentNode
);

这里的空白不是必需的，它只是为了更清楚地显示去哪里。