100 element innerHTML | var innerHTMLstr = '<div>';
for (var i = 0; i < 100; i++) {
innerHTMLstr += '<div><span>' + i + '</span></div>';
}
innerHTMLstr+='</div>';
document.getElementById('container').innerHTML = innerHTMLstr;
| ready |
100 element createElement added in sequence | var container = document.getElementById('container');
var outerdiv = document.createElement('div');
container.appendChild(outerdiv);
for (var i = 0; i < 100; i++) {
var div = document.createElement('div');
var span = document.createElement('span');
span.innerHTML = i;
div.appendChild(span);
outerdiv.appendChild(div);
}
| ready |
100 element 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.innerHTML = i;
div.appendChild(span);
outerdiv.appendChild(div);
}
container.appendChild(outerdiv);
| ready |
100 element innerHTML with Array.join() | var innerHTMLarray = [ '<div>' ];
for (var i = 0; i < 100; i++) {
innerHTMLarray[innerHTMLarray.length] = '<div><span>';
innerHTMLarray[innerHTMLarray.length] = i;
innerHTMLarray[innerHTMLarray.length] = '</span></div>';
}
innerHTMLarray[innerHTMLarray.length] = '</div>';
document.getElementById('container').innerHTML = innerHTMLarray.join('');
| ready |
100 element innerHTML with Array.join() and Array.push() | 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 |
100 element createElement + innerHTML + outerHTML | var container = document.getElementById('container');
for (var i = 0; i < 100; i++) {
var div = document.createElement('div');
var span = document.createElement('span');
span.innerHTML = i;
div.appendChild(span);
container.innerHTML += outerHTML(div);
}
| ready |
100 element bulk createElement + innerHTML + outerHTML | 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.innerHTML = i;
div.appendChild(span);
outerdiv.appendChild(div);
}
container.innerHTML = outerHTML(outerdiv);
| ready |
100x insertAdjacentHTML | var i = -1, div = document.createElement('div'), html='<div>';
while (++i < 100) {
html += '<div><span>' + i + '</span></div>';
}
html += '</div>';
document.getElementById('container').insertAdjacentHTML('afterbegin', html);
| ready |