javascript - Should you add HTML to the DOM using innerHTML or by creating new elements one by one? - Stack Overflow

admin管理员组

文章数量:1345031

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.

• javascript
• jquery
• dom
• createelement

Share Improve this question Follow edited Dec 1, 2024 at 14:28 dumbass 27.3k44 gold badges3838 silver badges7474 bronze badges asked Feb 23, 2010 at 15:47 HarmenHarmen 22.5k44 gold badges5656 silver badges7777 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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)

本文标签：