There are two methods to add HTML-code to the DOM and I don't know what is the best way to do it.
First method
The first way is the easy one, I could simply add HTML-code (with jQuery) using $('[code here]').appendTo(element); which is much like element.innerHTML = [code here];
Second method
Another way is to create all the elements one by one like:
// New div-element
var div = $('<div/>', {
id: 'someID',
class: 'someClassname'
});
// New p-element that appends to the previous div-element
$('<p/>', {
class: 'anotherClassname',
text: 'Some textnode',
}).appendTo(div);
This method uses core functions like document.createElement and element.setAttribute.
When should I use the first method and when the second? Is method two faster than method one?
Edit - Result of speed tests
I did three speed tests from which the code follows:
$(document).ready(function(){
// jQuery method - Above mentioned as the second method
$('#test_one').click(function(){
startTimer();
var inhere = $('#inhere');
for(i=0; i<1000; i++){
$(inhere).append($('<p/>', {'class': 'anotherClassname' + i, text: 'number' + i}));
}
endTimer();
return false;
});
// I thought this was much like the jQuery method, but it was not, as mentioned in the ments
$('#test_two').click(function(){
startTimer();
var inhere = document.getElementById('inhere');
for(i=0; i<1000; i++){
var el = document.createElement('p')
el.setAttribute('class', 'anotherClassname' + i);
el.appendChild(document.createTextNode('number' + i));
inhere.appendChild(el);
}
endTimer();
return false;
});
// This is the innerHTML method
$('#test_three').click(function(){
startTimer();
var inhere = document.getElementById('inhere'), el;
for(i=0; i<1000; i++){
el += '<p class="anotherClassname' + i + '">number' + i + '</p>';
}
inhere.innerHTML = el;
endTimer();
return false;
});
});
Which gave the following really surprising results
| Test One | Test Two | Test Three | |
|---|---|---|---|
| Chrome 5 | ~125ms | ~10ms | ~15ms |
| Firefox 3.6 | ~365ms | ~35ms | ~23ms |
| IE 8 | ~828ms | ~125ms | ~15ms |
There are two methods to add HTML-code to the DOM and I don't know what is the best way to do it.
First method
The first way is the easy one, I could simply add HTML-code (with jQuery) using $('[code here]').appendTo(element); which is much like element.innerHTML = [code here];
Second method
Another way is to create all the elements one by one like:
// New div-element
var div = $('<div/>', {
id: 'someID',
class: 'someClassname'
});
// New p-element that appends to the previous div-element
$('<p/>', {
class: 'anotherClassname',
text: 'Some textnode',
}).appendTo(div);
This method uses core functions like document.createElement and element.setAttribute.
When should I use the first method and when the second? Is method two faster than method one?
Edit - Result of speed tests
I did three speed tests from which the code follows:
$(document).ready(function(){
// jQuery method - Above mentioned as the second method
$('#test_one').click(function(){
startTimer();
var inhere = $('#inhere');
for(i=0; i<1000; i++){
$(inhere).append($('<p/>', {'class': 'anotherClassname' + i, text: 'number' + i}));
}
endTimer();
return false;
});
// I thought this was much like the jQuery method, but it was not, as mentioned in the ments
$('#test_two').click(function(){
startTimer();
var inhere = document.getElementById('inhere');
for(i=0; i<1000; i++){
var el = document.createElement('p')
el.setAttribute('class', 'anotherClassname' + i);
el.appendChild(document.createTextNode('number' + i));
inhere.appendChild(el);
}
endTimer();
return false;
});
// This is the innerHTML method
$('#test_three').click(function(){
startTimer();
var inhere = document.getElementById('inhere'), el;
for(i=0; i<1000; i++){
el += '<p class="anotherClassname' + i + '">number' + i + '</p>';
}
inhere.innerHTML = el;
endTimer();
return false;
});
});
Which gave the following really surprising results
| Test One | Test Two | Test Three | |
|---|---|---|---|
| Chrome 5 | ~125ms | ~10ms | ~15ms |
| Firefox 3.6 | ~365ms | ~35ms | ~23ms |
| IE 8 | ~828ms | ~125ms | ~15ms |
All in all the innerHTML method seems to be the fastest one and is in many cases the most readable one.
I point to an outdated article for purposes of people testing this for themselves. The DOM methods actually beat out the innerHTML on all of my machines so that is what I prefer. However, at the time of the article innerHTML was faster on avg. Currently the difference can only be seen in huge datasets drastically.
Actually, neither methods use innerHTML, in both cases jQuery converts the HTML to DOM nodes. From jquery-1.3.2.js:
// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
if ( !fragment && elems.length === 1 && typeof elems[0] === "string" ) {
var match = /^<(\w+)\s*\/?>$/.exec(elems[0]);
if ( match )
return [ context.createElement( match[1] ) ];
}
// ... some more code (shortened so nobody falls asleep) ...
// Convert html string into DOM nodes
if ( typeof elem === "string" ) {
// Fix "XHTML"-style tags in all browsers
elem = elem.replace(/(<(\w+)[^>]*?)\/>/g, function(all, front, tag){
return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ?
all :
front + "></" + tag + ">";
});
// etc...
}
Generally speaking, using innerHTML is slower than manipulating the DOM, because it invokes the HTML parser (which will parse the HTML into the DOM anyway).
If I am going to re-use the div later in the code, I'll build it and put it in a var, usually with a $ prefix so I know it's a jQuery object. If it's a one-off thing I'll just do a:
$('body').append(the stuff)