Run results for: Creating/adding html element performance (10 elements)

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.164 Safari/537.36

Browser: Chrome 91

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
Pure JavaScript	20338.9 Ops/sec
Strings / append	7733.7 Ops/sec
Strings array / append	19129.3 Ops/sec
Strings / innerHTML	24412.8 Ops/sec
Strings array / innerHTML	26737.1 Ops/sec
Strings / html	17952.1 Ops/sec
Strings array / html	20697.8 Ops/sec

HTML Preparation code:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div id="test"></div>

Tests:

Pure JavaScript
var c = document.createDocumentFragment(); for (var i=0; i<5; i++) { const inputElem = document.createElement("input"); inputElem.id = "inputTest" + i; inputElem.name = "inputTest"; inputElem.type = "radio"; inputElem.value = "value"; const labelElem = document.createElement("label"); labelElem.htmlFor = "inputTest" + i; labelElem.innerText = "inputTest" + i; labelElem.setAttribute("style", "color: " + "#FF0000"); const container = document.createElement("label"); container.appendChild(inputElem); container.appendChild(labelElem); c.appendChild(container); } var elem = document.getElementById("test"); elem.appendChild(c);
Strings / append
var s = ""; for (var i=0; i<5; i++) { s += "<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"; } $("#test").append(s);
Strings array / append
var a = []; for (var i=0; i<5; i++) { a.push("<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"); } $("#test").append(a.join(""));
Strings / innerHTML
var s = ""; for (var i=0; i<5; i++) { s += "<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"; } var elem = document.getElementById("test"); elem.innerHTML = s;
Strings array / innerHTML
var a = []; for (var i=0; i<5; i++) { a.push("<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"); } var elem = document.getElementById("test"); elem.innerHTML = a.join("");
Strings / html
var s = ""; for (var i=0; i<5; i++) { s += "<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"; } $("#test").html(s);
Strings array / html
var a = []; for (var i=0; i<5; i++) { a.push("<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' stye='color: #FF0000'>inputTest" + i + "</label></label>"); } $("#test").html(a.join(""));

Run results for: Creating/adding html element performance (10 elements)

Pure JavaScript

Strings / append

Strings array / append

Strings / innerHTML

Strings array / innerHTML

Strings / html

Strings array / html