JSFiddle - React, Tailwind, and code Playground

HTML

<button id="inject-div">Inject DIV</button>
<button id="inject-ul">Inject UL</button>
<button id="fix-list">Fix List</button>
<button id="clear">Clear</button>
<div id="root"></div>

CSS

li{display:block;}
.fixed li{display:list-item;}

JavaScript

var COUNT = 1E4,
    elements = Object.keys(Array(COUNT).join(',').split(','));

var d    = document, 
    temproot = d.createDocumentFragment(),
    root = d.getElementById('root');

var injectDIV = function() {
    var count = COUNT,
        ul = d.createElement('div'),
        liTmpl = d.createElement('div'),
        liEl = null;
    console.time('Processing div elements');
    while (count--) {
        liEl = liTmpl.cloneNode(false);
        liEl.textContent = elements[count];
        ul.appendChild(liEl);
    }
    console.timeEnd('Processing div elements');
    console.time('Appending div into DOM');
    root.appendChild(ul);
    console.timeEnd('Appending div into DOM');
};
var injectUL = function() {
    var count = COUNT,
        ul = d.createElement('ul'),
        liTmpl = d.createElement('li'),
        liEl = null;
    console.time('Processing ul elements');
    while (count--) {
        liEl = liTmpl.cloneNode(false);
        liEl.textContent = elements[count];
        ul.appendChild(liEl);
    }
    console.timeEnd('Processing ul elements');
    console.time('Appending ul into DOM');
    root.appendChild(ul);
    console.timeEnd('Appending ul into DOM');
    
};
var fixList = function(){
    var uls = d.getElementsByTagName('ul'),
        count = uls.length;
    
    while(count--){
        uls[count].className = 'fixed';
    }
}
d.getElementById('inject-ul').addEventListener('click', injectUL);
d.getElementById('inject-div').addEventListener('click', injectDIV);
d.getElementById('fix-list').addEventListener('click', fixList);
d.getElementById('clear').addEventListener('click', function() {
  root.innerHTML = '';    
});