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

Test name	Executions per second
✓ Strings array / innerHTML	24,749 Ops/sec
Strings / innerHTML	24,245 Ops/sec
Strings / html	18,602 Ops/sec
Strings array / html	18,336 Ops/sec
Pure JavaScript	535 Ops/sec
Strings / append	161 Ops/sec
Strings array / append	124 Ops/sec

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(""));