innerHTML vs createElement test (v29)

Revision 29 of this benchmark created on

Preparation HTML

<div id="container">
</div>

Setup

container = document.getElementById('container')
    container.innerHTML = '';
    escapeHTML = function(text){
      return String(text).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    }

Teardown


    container.innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
var html = ''

for (var i = 0; i < 100; i++) {
  html += '<div><span>' + escapeHTML(i) + '</span></div>'
}

container.innerHTML = html

var nodes = []
var node = container.firstChild
do{
  nodes.push(container[i])
} while( node = node.nextSibling )
ready
fragment + innerHTML
var fragment = document.createDocumentFragment();
var nodes = []

for (var i = 0; i < 100; i++) {
  var div = document.createElement("div")
  var span = document.createElement("span")
  span.innerHTML = escapeHTML(i)
  div.appendChild(span)
  fragment.appendChild(div)
  nodes.push(div)
}

container.appendChild(fragment)
ready
fragment + textContent
var fragment = document.createDocumentFragment();
var nodes = []

for (var i = 0; i < 100; i++) {
  var div = document.createElement("div")
  var span = document.createElement("span")
  span.textContent = i
  div.appendChild(span)
  fragment.appendChild(div)
  nodes.push(div)
}

container.appendChild(fragment)
ready
fragment + innerText
var fragment = document.createDocumentFragment();
var nodes = []

for (var i = 0; i < 100; i++) {
  var div = document.createElement("div")
  var span = document.createElement("span")
  span.innerText = i
  div.appendChild(span)
  fragment.appendChild(div)
  nodes.push(div)
}

container.appendChild(fragment)
ready
fragment + textNode
var fragment = document.createDocumentFragment();
var nodes = []

for (var i = 0; i < 100; i++) {
  var div = document.createElement("div")
  var span = document.createElement("span")
  var text = document.createTextNode(String(i))
  span.appendChild(text)
  div.appendChild(span)
  fragment.appendChild(div)
  nodes.push(div)
}

container.appendChild(fragment)
ready
insertAdjacentHTML
var nodes = []
for (var i = 0; i < 100; i++) {
  container.insertAdjacentHTML('beforeend', '<div><span>' + escapeHTML(i) + '</span></div>')
  nodes.push(container.lastChild)
}
 
ready

Revisions

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