createElement + createTextNode oneliner?

Question

I'm adding a few thousand rows to a table so i need the speed of native javascript for this one.

Currently I'm using:

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

Is there a way to do this in one line (without losing any performance?) so I don't need the nThName variable?

There are over 50 cells on each row so I would prefer:

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

but that don't work.. obviously

Answer 1

So, you're looking for performance? One-liners don't help with that. Using document fragments and cloning nodes does help, however. But it requires a bit more code.

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

See jsfiddle demo: http://jsfiddle.net/3KGwh/3/

Document fragments are basically mini-DOM, with limited methods. They're great because they allow you to get great performance, and you can append a single element to the real DOM.

Answer 2

This can be done, as an example:

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

JS Fiddle representative demo.

I think it's just your approach to chaining that was off; given your specific demo code:

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

The white-space here isn't essential, it's simply to more-clearly show what goes where.