Creating DOM by jQuery or innerHTML

Benchmark created by Gustavo Paes on

Description

Which is faster: create DOM elements using jQuery() or innerHTML?

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="container" style="height:200px;overflow:auto;"></div>

Setup

var markup = '<div class="video">\
      <h1 ng-model="someModel">Default video title</h1>\
      <img ng-src="otherModel" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="1" />\
      <p ng-model="textModel">awesome video</p>\
    </div>';
    
    var div = document.createElement('div');
    var el = document.getElementById("container");

Test runner

Ready to run.

Testing in
TestOps/sec
By jQuery
el.appendChild($(markup).get(0));
ready
By innerHTML
div.innerHTML = markup;
el.appendChild(div.firstChild);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Gustavo Paes on