createElement + createTextNode？

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
);

这里的空白并不是必需的，它只是为了更清楚地显示出发生了什么。

Answer 3

就像大卫·托马斯建议的那样。一个助手函数显然是最好的选择：

nTr.appendChild(newElement("TH", workers[i].name));

function newElement(TagName, TextContent, ClassName) {
    var nTag = document.createElement(TagName);
    nTag.className = ClassName;
    nTag.appendChild(document.createTextNode(TextContent));
    return nTag;
}

用弗洛里安·马加因的建议改变了它。结果非常快。速度比纯敲除或jquery快很多倍。

var tplTbody = document.createElement("TBODY");
var tplTr = document.createElement("TR");
var tplTd = document.createElement("TD"); // Every element used has it's 'template'

var nTbody = tplTbody.cloneNode();
for(var i in rows) {
    var nTr = newElement(tplTr.cloneNode(), null, "someclass");
    for(var i in cells) {
        nTr.appendChild(newElement(tplTd.cloneNode(), cell[i].content);
    }
    nTbody.appendChild(nTr);
}
document.getElementById("myTable").appendChild(nTbody);


function newElement(Tag, TextContent, ClassName) {
    if (TextContent !== undefined && TextContent != null)
        Tag.appendChild(document.createTextNode(TextContent));
    if (ClassName !== undefined && ClassName != null) 
        Tag.className = ClassName;
    return Tag;
}