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

Run details:

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

Browser: Chrome 100

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

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<10; i++) { var e = document.createElement("input"); e.className = "test-div"; e.name = "test-div-name"; e.type = "radio"; e.value = "test"; c.appendChild(e); } var elem = document.getElementById("test"); elem.appendChild(c);
Strings / append
var s = ""; for (var i=0; i<10; i++) { s += "<input class='test-div' name='test-div-name' type='radio' value='test'/>"; } $("#test").append(s);
Strings array / append
var a = []; for (var i=0; i<10; i++) { a.push("<input class='test-div' name='test-div-name' type='radio' value='test'/>"); } $("#test").append(a.join(""));
Strings / innerHTML
var s = ""; for (var i=0; i<10; i++) { s += "<input class='test-div' name='test-div-name' type='radio' value='test'/>"; } var elem = document.getElementById("test"); elem.innerHTML = s;
Strings array / innerHTML
var a = []; for (var i=0; i<10; i++) { a.push("<input class='test-div' name='test-div-name' type='radio' value='test'/>"); } var elem = document.getElementById("test"); elem.innerHTML = a.join("");
Strings / html
var s = ""; for (var i=0; i<10; i++) { s += "<input class='test-div' name='test-div-name' type='radio' value='test'/>"; } $("#test").html(s);
Strings array / html
var a = []; for (var i=0; i<10; i++) { a.push("<input class='test-div' name='test-div-name' type='radio' value='test'/>"); } $("#test").html(a.join(""));