100 element innerHTML | var innerHTMLstr = '<div>';
for (var i = 0; i < 100; i++) {
innerHTMLstr += '<div><span></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');
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');
div.appendChild(span);
outerdiv.appendChild(div);
}
container.appendChild(outerdiv);
| ready |
Jquery appendTo | var container = $("#container");
var outerdiv = $("<div>");
for (var i = 0; i < 100; i++) {
var div = $("<div>");
var span = $("<div>");
span.appendTo(div);
div.appendTo(outerdiv)
}
container.append(outerdiv);
| ready |
Jquery appendTo[0] | var container = $("#container");
var outerdiv = $("<div>");
for (var i = 0; i < 100; i++) {
var div = $(document.createElement('div'));
var span = $(document.createElement('span'));
div[0].appendChild(span[0]);
outerdiv[0].appendChild(div[0])
}
container[0].appendChild(outerdiv[0]);
| ready |
Document fragment | var container = document.getElementById('container');
var outerdiv = document.createElement('div');
var buff = document.createDocumentFragment();
for (var i = 0; i < 100; i++) {
var div = document.createElement('div');
var span = document.createElement('span');
div.appendChild(span);
buff.appendChild(div);
}
outerdiv.appendChild(buff);
container.appendChild(outerdiv);
| ready |