Benchmark: Creating/adding html element performance (5 elements) v2

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(); var elem = document.getElementById("test"); 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); elem.appendChild(c); }
Strings / append
var s = ""; var test = $("#test"); 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 = []; var test = $("#test"); 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("")); }

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Linux

Creating/adding html element performance (5 elements) v2 (version: 0)