createElement() vs. innerHTML When to use?

Question

I have some data in a sql table. I send it via JSON to my JavaScript.

From there I need to compose it into HTML for display to the user by 1 of 2 ways.

By composing the html string and inserting into .innerHTML property of the holding element
By using createElment() for each element I need and appending into the DOM directly

Neither of the questions below gives a quantifiable answer.

From first answer in first link, 3rd Reason ( first two reasons stated don't apply to my environment )

Could be faster in some cases

Can someone establish a base case of when createElement() method is faster and why?

That way people could make an educated guess of which to use, given their environment.

In my case I don't have concerns for preserving existing DOM structure or Event Listeners. Just efficiency ( speed ).

I am not using a library regarding the second link I provided. But it is there for those who may.

Research / Links

Advantages of createElement over innerHTML?

JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure?

There's always [jsperf](http://jsperf.com) where you can try things out. — Pointy, May 30 '12 at 16:11
This isn't an answer that someone can just know. It depends on how your code is written and what you're doing. The only real way to know is to test it with both methods. — j08691, May 30 '12 at 16:23
See also [Is it possible to append to innerHTML without destroying descendants' event listeners?](http://stackoverflow.com/q/595808/1048572) — Bergi, Oct 04 '16 at 19:22

score 5 · Accepted Answer · edited Sep 10 '13 at 12:28

5

Adding to the DOM n times takes n times more time than adding to the DOM a single time. (:P)

This is the logic I'm personally following.

In consequence, when it is about to create, for instance, a SELECT element, and add to it several options, I prefer to add up all options at once using innerHTML than using a createElement call n times.

This is a bit the same as to compare BATCH operation to "one to one"... whenever you can factorise, you should!

EDIT: Reading the comments I understand that there's a feature (DOM DocumentFragment) that allow us saving such overhead and at the same time taking advantage of the DOM encapsulation. In this case, if the performances are really comparable, I would definitely not doubt and chose the DOM option.

edited Sep 10 '13 at 12:28

Fred

12,086
7
60
83

answered May 30 '12 at 16:15

Sebas

21,192
9
55
109

Check out 2nd answer of 2nd link from above regarding fragments – May 30 '12 at 16:17
Yes this is a very interesting feature. And for what is about your concern I guess this is the right answer... – Sebas May 30 '12 at 16:22
this is only true for old versions of IE. – Abbas Gadhia May 31 '13 at 04:48
@Nerrve No, my chrome version at the time of my answer was behaving so. Recently I could also confirm this fact once again. But anyway, the document fragment feature should be the approach. – Sebas May 31 '13 at 11:54

NoBugs · Answer 2 · 2013-05-31T04:44:30.577

I thought I read somewhere that the createElement and appendElement is faster. It makes sense, considering document.write() and innerHTML have to parse a string, and create and append the elements too. I wrote a quick test to confirm this:

<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function inner() {

    var test = '';
    for (var i=0; i<10000; i++) {
        test += '<p><a href="../" target="_blank">bogus link</a> with some other <strong>stuff</strong></p>';
    }

    console.time('innerHTML');
    document.getElementById('test').innerHTML = test;
    console.timeEnd('innerHTML');
}

function jq() {
    var test = '';
    for (var i=0; i<10000; i++) {
        test += '<p><a href="../" target="_blank">bogus link</a> with some other <strong>stuff</strong></p>';
    }

    console.time('jquery');
    jQuery('#test').html(test);
    console.timeEnd('jquery');
}

function createEl() {
    var dest = document.getElementById('test');

    console.time('createel');
    //dest.innerHTML = '';//Not IE though?
    var repl = document.createElement('div');
    repl.setAttribute('id','test');
    for (var i=0; i<10000; i++) {
        var p = document.createElement('p');
        var a = document.createElement('a');
        a.setAttribute('href','../'); a.setAttribute('target','_blank');
        a.appendChild(document.createTextNode("bogus link"));
        p.appendChild(a);
        p.appendChild(document.createTextNode(" with some other "));
        var bold = document.createElement('strong');
        bold.appendChild(document.createTextNode("stuff"));
        p.appendChild(bold);
        repl.appendChild(p);
    }
    dest.parentNode.replaceChild(repl,dest);
    console.log('create-element:');
    console.timeEnd('createel');
}
</script>
<button onclick="inner()">innerhtml</button>
<button onclick="jq()">jquery html</button>
<button onclick="createEl()">Create-elements</button>
<div id="test">To replace</div>
</body>
</html>

In this example, the createElement - appendChild method of writing out HTML works significantly faster than innerHTML/jQuery!

createElement() vs. innerHTML When to use?

2 Answers2

Related