CODEWITHSUNDEEP
javascript
user656925
user656925

Reputation:

createElement() vs. innerHTML When to use?

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.

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?

Upvotes: 10

Views: 6445

Answers (2)

Sebas
Sebas

Reputation: 21522

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.

Upvotes: 5

NoBugs
NoBugs

Reputation: 9496

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!

Upvotes: 3

Related Questions