jQuery append vs document.createElement (v2)

Revision 2 of this benchmark created on September 5, 2011

Preparation HTML

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

<script>
  var toString = Object.prototype.toString;
  
  var each = function(obj, fn) {
    for (i in obj) {
      obj.hasOwnProperty(i) && fn(obj[i], i);
    }
  };
  
  var attrs = {
    id : 'sectionMenu',
    className : 'section'
  };
  
  var htmlStr = "<div id='container'><div id='first'><p>First paragraph</p><p>Second paragraph</p></div></div>";
  
  var htmlObj = {
    tag   : 'div',
    attrs : {
      id  : 'container'
    },
    contents : [{
      tag : 'div',
      attrs : {
        id : 'first'
      },
      contents : [{
        tag : 'p',
        contents : ['First paragraph']
      },{
        tag : 'p',
        contents : ['Second paragraph']
      }]
    }]
  };
  
  function template (obj) {
    var el = document.createElement(obj.tag);
    each(obj.attrs, function(val, key) {
      el[key] = val;
    });
    each(obj.contents, function(val, key) { 
      el.appendChild(
        toString.call(val) == '[object Object]' ?
          template(val) :
          document.createTextNode(val)
      );
    });
    return el
  };
</script>

Test runner

var el = document.createElement('div');
$('<div />').attr(attrs).appendTo(el);
 

var el = document.createElement('div');
$(htmlStr).appendTo(el);

var el = document.createElement('div');
el.appendChild(template(htmlObj));

var el = document.createElement('div');
el.innerHTML = htmlStr;

Revisions

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

• Revision 1: published on September 5, 2011
• Revision 2: published on September 5, 2011