Run results for: Creating/adding html element performance (100 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

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