Run results for: create DOM Element

Run details:

User agent: Mozilla/5.0 (Linux; Android 11; SM-A405FM) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.104 Mobile Safari/537.36 OPR/67.1.3508.63168

Browser: Opera Mobile 67

Operating system: Android

Device Platform: Mobile

Date tested: 2 years ago

Test name	Executions per second
createElement	99.9 Ops/sec
cloneNode	157.9 Ops/sec
innerHTML	128.3 Ops/sec

HTML Preparation code:

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

Tests:

createElement
var container = document.getElementById('container'), i, j; for (i = 0; i < 100; ++i) { var div = document.createElement("div"); for(t = 0; t < 10; ++t){ var span = document.createElement("span"); span.appendChild(document.createTextNode('test')); div.appendChild(span); } container.appendChild(div); }
cloneNode
var container = document.getElementById('container'), span = document.createElement("span"), text = document.createTextNode('test'), souceDiv = document.createElement("div"), i, j; span.appendChild(text); for (i = 0; i < 100; ++i) { var div = souceDiv.cloneNode(); for(t = 0; t < 10; ++t){ var span = span.cloneNode(true); div.appendChild(span); } container.appendChild(div); }
innerHTML
var htmlStr = [], container = document.getElementById('container'), i, j; for(i = 0; i < 100; ++i){ htmlStr.push("<div>"); for(j = 0; j < 10; ++j){ htmlStr.push("<span>test</span>"); } htmlStr.push("</div>"); } container.innerHTML = htmlStr.join('');

Run results for: create DOM Element

createElement

cloneNode

innerHTML