HTML elements from string

Benchmark created by DanielM on

Setup

function create(html) {
      var div = document.createElement('div')
      div.innerHTML = html
      return div.childNodes
  }
  
  function create2(html) {
      return document.createRange().createContextualFragment(html)
  }

Test runner

Ready to run.

Testing in
TestOps/sec
Using a real HTML element
var elems = '';
for (let i = 0; i < 50; ++i) {
    elems += '<li name="hello" class="item">Test</li>';
}
create('<ul>' + elems + '</ul>');
ready
Using an HTML fragment
var elems = '';
for (let i = 0; i < 50; ++i) {
    elems += '<li name="hello" class="item">Test</li>';
}
create2('<ul>' + elems + '</ul>');
ready
Creating the HTML elements directly
var fragment = document.createDocumentFragment();
var list = document.createElement('ul');
for (var i = 0; i < 50; ++i) {
    var li = document.createElement('li');
    li.textContent = 'Test';
    li.className = 'item';
    li.setAttribute('name', 'hello');
    list.appendChild(li);
}
ready
Creating the HTML elements directly -- no attributes
var fragment = document.createDocumentFragment();
var list = document.createElement('ul');
for (var i = 0; i < 50; ++i) {
    var li = document.createElement('li');
    li.textContent = 'Test';
    list.appendChild(li);
}
ready

Revisions

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

  • Revision 1: published by DanielM on