JSFiddle - React, Tailwind, and code Playground

HTML

<div id="msg"></div>
<ul id="ulItem"></ul>

JavaScript

function GenLi01() {
    var oUL = document.getElementById("ulItem");
    for (var i = 0; i < 20000; i++) {
        var oLI = document.createElement("li");
        oUL.appendChild(oLI);
        oLI.appendChild(document.createTextNode("Item" + i));
    }
}

function GenLi02() {
    var oUL = document.getElementById("ulItem");
    var oTemp = document.createDocumentFragment();
    for (var i = 0; i < 20000; i++) {
        var oLI = document.createElement("li");
        oLI.appendChild(document.createTextNode("Item" + i));
        oTemp.appendChild(oLI);
    }
    oUL.appendChild(oTemp);
}

var testUL = document.getElementById("ulItem");
var div = document.getElementById("msg");

var s = (new Date).getTime();
GenLi01();
div.innerHTML += "<p>createElement Time : " + ((new Date).getTime() - s) + "</p>";

s = (new Date).getTime();
GenLi02();
div.innerHTML += "<p>createDocumentFragment Time : " + ((new Date).getTime() - s) + "</p>";