JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>
<div id="container2"></div>
<div id="container3"></div>

JavaScript

var el = document.getElementById('container');
var el2 = document.getElementById('container2');
var aux;;
var start = (new Date()).getTime();
for (x = 0; x < 1000; x++) {
    aux = document.createElement('div');
    aux.innerHTML = x;
    el.appendChild(aux);
}
var end =  (new Date()).getTime();
console.log('js option: '+(end-start));

start =  (new Date()).getTime();
for(x = 0; x < 1000; x++) {
    var element = $('<div>'+x+'</div>');
    $('#container2').append(element);
}
end =  (new Date()).getTime();
console.log('jquery option: '+(end-start));

start =  (new Date()).getTime();
var fragment = document.createDocumentFragment();
for(var i = 0; i < 1000; i++) {
    fragment.appendChild(document.createElement('div'));
}
document.getElementById('container3').appendChild(fragment);
end =  (new Date()).getTime();
console.log('jackwanders option: '+(end-start));