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 representative demo

我认为这只是你关闭链接的方法;给出您的具体演示代码：

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

根据Florian Margaine的建议改变了它。结果非常快。比纯淘汰或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;
}

createElement + createTextNode oneliner？

3 个答案: