Run results for: append vs appendChild vs insertAdjacentHTML vs DOMParser vs createContextualFragment

Test name	Executions per second
✓ DOMParser	1,723 Ops/sec
insertAdjacentHTML	1,251 Ops/sec
appendChild	845 Ops/sec
append	788 Ops/sec
createContextualFragment	565 Ops/sec

append

var newElement = document.createElement("div");
newElement.id = "testing"
for (i = 0; i < 1000; i++) {
  var newElementPart = document.createElement("div");
  newElementPart.classList.add("testClass");
  newElement.append(newElementPart);
}
document.getElementById("test").append(newElement);

appendChild

var newElement = document.createElement("div");
newElement.id = "testing"
for (i = 0; i < 1000; i++) {
  var newElementPart = document.createElement("div");
  newElementPart.classList.add("testClass");
  newElement.appendChild(newElementPart);
}
document.getElementById("test").appendChild(newElement);

insertAdjacentHTML

html = "<div id='testing'>"
for (i = 0; i < 1000; i++) {
  html += "<div class='testClass'></div>";
}
html += "</div>";
document.getElementById("test").insertAdjacentHTML("beforeend", html);

DOMParser

html = "<div id='testing'>"
for (i = 0; i < 1000; i++) {
  html += "<div class='testClass'></div>";
}
html += "</div>";
document.getElementById("test").append((new DOMParser()).parseFromString(html, "text/html").body.childNodes);

createContextualFragment

html = "<div id='testing'>"
for (i = 0; i < 1000; i++) {
  html += "<div class='testClass'></div>";
}
html += "</div>";
document.getElementById("test").append(document.createRange().createContextualFragment(html));