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

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0

Browser: Firefox 131

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Pure JavaScript	534.5 Ops/sec
Strings / append	161.2 Ops/sec
Strings array / append	124.3 Ops/sec
Strings / innerHTML	24245.0 Ops/sec
Strings array / innerHTML	24748.6 Ops/sec
Strings / html	18602.4 Ops/sec
Strings array / html	18335.9 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 + "' style='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 + "' style='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 + "' style='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 + "' style='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 + "' style='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 + "' style='color: #FF0000'>inputTest" + i + "</label></label>"); } $("#test").html(a.join(""));

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

Pure JavaScript

Strings / append

Strings array / append

Strings / innerHTML

Strings array / innerHTML

Strings / html

Strings array / html