innerHTML vs. cloneNode (v7)

Revision 7 of this benchmark created on

Description

Tests various DOM construction patterns.

Preparation HTML

<style>
  .hidden {display: none;}
</style>
<div class="hidden"></div>
<div class="shown"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var content = '<select>';
  for (var i = 0; i < 200; i++)
    content += '<option value="'+i+'">'+i+'</option>';
  content += '</select>';
  
  var proto = document.createElement("div");
  proto.innerHTML = content;
  
  var frag = document.createDocumentFragment();
  frag.appendChild(proto.cloneNode(true));

  var $proto = $('<div>'+content+'</div>');

  var hidden = $('.hidden').get(0);
  var shown = $('.shown').get(0);

  var detached = document.createElement('div');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML on hidden node
hidden.innerHTML = content;
ready
innerHTML on shown node
shown.innerHTML = content;
ready
innerHTML on detached node
detached.innerHTML = content;
ready
cloneNode
proto.cloneNode(true);
ready
createElement
document.createElement('div');
ready
cloneNode into new node
document.createElement('div').appendChild(proto.cloneNode(true));
ready
cloneNode into detached node
detached.childNodes = [proto.cloneNode(true)];
ready
innerHTML on new node
document.createElement('div').innerHTML = content;
ready
createElement into new node
select = document.createElement('select');
children = [];
for (var i = 0; i < 200; i++) {
  children.push(document.createElement('option'));
  children[i].setAttribute('value',i);
  children[i].appendChild(document.createTextNode(i));
}
select.childNodes = children;
document.createElement('div').appendChild(select);
ready
jQuery parse
$(content);
ready
jQuery build
select = $('<select/>');
children = [];
for (var i = 0; i < 200; i++)
  children.push($('<option/>', {text: i, value: i}));
document.createElement('div').appendChild(select.append(children).get(0));
ready
jQuery clone
$proto.clone();
ready
jQuery build appending
select = $('<select/>');
for (var i = 0; i < 200; i++)
  select.append($('<option/>', {text: i, value: i}));
document.createElement('div').appendChild(select.get(0));
ready
cloneNode into new node and update selection
var cloned = proto.cloneNode(true);
cloned.selectedIndex = 3;
document.createElement('div').appendChild(cloned);
ready
jQuery build with createElement
select = $(document.createElement('select'));
children = [];
for (var i = 0; i < 200; i++)
  children.push($(document.createElement('option'), {text: i, value: i}));
document.createElement('div').appendChild(select.append(children).get(0));
ready

Revisions

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