JSFiddle - React, Tailwind, and code Playground
HTML
<button class="create">Create</button>
<button class="delete">Delete</button>
<div id="parent"></div>
JavaScript
var parentDiv = document.querySelector('#parent');
var actions = {
create: function createStuff() {
var frag = document.createDocumentFragment();
for (var i = 0; i < 10000; i++) {
var child = document.createElement('div');
child.id = i;
child.textContent = i;
frag.appendChild(child);
}
parentDiv.appendChild(frag);
},
delete: function deleteStuff() {
while (parentDiv.children.length) parentDiv.removeChild(parentDiv.firstChild);
}
};
Array.prototype.forEach.call(document.querySelectorAll('button'), function addListener(el) {
el.addEventListener('click', function handler(event) {
console.log(event.target.textContent + '!');
actions[event.target.className]();
});
});