JSFiddle - React, Tailwind, and code Playground
HTML
<button id="inject">Inject</button>
<button id="clear">Clear</button>
<div id="root"></div>
JavaScript
var COUNT = 1E4,
elements = Object.keys(Array(COUNT).join(',').split(','));
var d = document,
root = d.getElementById('root');
var inject = function() {
var count = COUNT,
ul = d.createElement('ul'),
liTmpl = d.createElement('li'),
liEl = null;
console.time('Processing elements');
while (count--) {
liEl = liTmpl.cloneNode(false);
liEl.textContent = elements[count];
ul.appendChild(liEl);
}
console.timeEnd('Processing elements');
console.time('Appending into DOM');
root.appendChild(ul);
console.timeEnd('Appending into DOM');
};
d.getElementById('inject').addEventListener('click', inject);
d.getElementById('clear').addEventListener('click', function() {
root.innerHTML = '';
});