innerHTML, string concat | var innerHTMLstr = '<div>';
for (var i = 0; i < 100; i++) {
innerHTMLstr += '<div><span>' + i + '</span></div>';
}
innerHTMLstr += '</div>';
document.getElementById('container').innerHTML = innerHTMLstr;
| ready |
innerHTML, Array.join() | var innerHTMLarray = ['<div>'];
for (var i = 0; i < 100; i++) {
innerHTMLarray.push('<div><span>', i, '</span></div>');
}
innerHTMLarray.push('</div>');
document.getElementById('container').innerHTML = innerHTMLarray.join('');
| ready |
createElement, bulk add | var container = document.getElementById('container');
var outerdiv = document.createElement('div');
for (var i = 0; i < 100; i++) {
var div = document.createElement('div');
var span = document.createElement('span');
span.textContent = i;
div.appendChild(span);
outerdiv.appendChild(div);
}
container.appendChild(outerdiv);
| ready |
Clone | var container = document.getElementById('container');
var outerdiv = document.createDocumentFragment();
var i, div, span;
var p;
div = document.createElement('div');
span = document.createElement('span');
div.appendChild(span);
for (i = 0; i < 100; i++) {
p = div.cloneNode(true);
p.firstChild.textContent = i;
outerdiv.appendChild(p);
}
container.appendChild(outerdiv);
| ready |
CreateElementV2 | var container = document.getElementById('container');
var outerdiv = document.createElement('div');
var dce = document.createElement.bind(document)
var d = document
var ce = document.createElement
document.ce = document.createElement
for (var i = 0; i < 100; i++) {
var div = ce.call(d,'div');
var span = ce.call(d,'span');
span.textContent = i;
div.appendChild(span);
outerdiv.appendChild(div);
}
container.appendChild(outerdiv);
| ready |