JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<ul id="list">
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
  <li>blablablablabla</li>
 ...

JavaScript

var list = document.getElementById("list"),
    list2 = list.cloneNode(true),
    removed = 0,
    modified = 0;

list2.id = "list2";
document.body.appendChild(list2);

document.addEventListener("DOMNodeRemoved", function(e) {
    removed++;
}, true);

document.addEventListener("DOMSubtreeModified", function(e) {
    modified++;
}, true);


console.log('clearing with removeChild()');
while (list.childNodes.length) {
    list.removeChild(list.childNodes[0]);
}
console.log("caused "
    + removed + " DOMNodeRemoved and " 
    + modified + " DOMSubtreeModified events");

console.log("clearing with innerHTML");
removed = 0;
modified = 0;
list2.innerHTML = "";
console.log("caused "
    + removed + " DOMNodeRemoved and "
    + modified + " DOMSubtreeModified events");