createElement + createTextNode oneliner?

javascript

Solution

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.

Problem

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

Original source