dom-adding

Benchmark created on

Description

Add dom elements

Preparation HTML

<div class="wrap"></div>

Setup

var s = '<div class="parent"><div class="child">foo</div></div>';
var wrap = document.querySelector('.wrap')
var parser = new DOMParser()

Test runner

Ready to run.

Testing in
TestOps/sec
htmlToElement
function htmlToElement(html) {
  var template = document.createElement('template');
  html = html.trim();
  template.innerHTML = html;
  return template.content.firstChild;
}

var elem = htmlToElement(s);
wrap.append(elem);
wrap.innerHTML = '';
ready
insertAdjacentHTML
wrap.insertAdjacentHTML('beforeend', s);
wrap.innerHTML = '';
ready
DOMParser
wrap.append( parser.parseFromString( s, 'text/html' ).querySelector( '.parent' ) );
wrap.innerHTML = '';
ready

Revisions

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