The changes I described earlier

Author: mksunny1

frameworks/keyed/vanillajs-3/src/Main.js

@@ -9,17 +9,23 @@ function* _random(n) {
         yield arr
     }
 }
-const data = [], tbody = document.getElementsByTagName('tbody')[0];
+const data = [], nTemplates = 10, tbody = document.getElementsByTagName('tbody')[0];
 let index = 1, i, lbl, selected;
 
 function create(n = 1000) { if (data.length) clear(); append(n); }
 function append(n = 1000) {
-    const [r1, r2, r3] = _random(n);
-    const itemTemplate = document.getElementById('itemTemplate').content.firstElementChild;
-    const itemId = itemTemplate.firstElementChild.firstChild, itemLabel = itemTemplate.querySelector('a.lbl').firstChild;
-    while (--n >= 0) {
-        itemId.nodeValue = index++;
-        data.push(itemLabel.nodeValue = `${adjectives[r1[n]]} ${colours[r2[n]]} ${nouns[r3[n]]}`)
+    const [r1, r2, r3] = _random(n); let j = 0;
+    const itemTemplate1 = document.getElementById('itemTemplate').content.firstElementChild;
+    const itemTemplate = document.createDocumentFragment();
+    for (i = 0; i < nTemplates; i++) itemTemplate.appendChild(itemTemplate1.cloneNode(true));
+    const ids = Array.prototype.map.call(itemTemplate.querySelectorAll('td:first-child'), i => i.firstChild)
+    const labels = Array.prototype.map.call(itemTemplate.querySelectorAll('a.lbl'), i => i.firstChild);
+    
+    while ((n -= nTemplates) >= 0) {
+        for (i = 0; i < nTemplates; i++, j++) {
+            ids[i].nodeValue = index++;
+            data.push(labels[i].nodeValue = `${adjectives[r1[j]]} ${colours[r2[j]]} ${nouns[r3[j]]}`)    
+        }
         tbody.appendChild(itemTemplate.cloneNode(true));
     }
 }
@@ -30,22 +36,22 @@ function update() {
 function clear() { data.length = 0; tbody.textContent = '' }
 
 function swap() {
-    if (data.length < 999) return; let temp;
+    if (data.length < 999) return; const first = tbody.firstElementChild;
     [data[1], data[998]] = [data[998], data[1]];
-    tbody.insertBefore(tbody.children[1], (temp = tbody.children[998]));
-    tbody.insertBefore(temp, tbody.children[1]);
+    tbody.insertBefore(tbody.insertBefore(first.nextElementSibling, 
+        tbody.children[998]).nextElementSibling, first.nextElementSibling);
 }
 tbody.onclick = (e) => {
     e.preventDefault; e.stopPropagation;
     if (e.target.matches('a.lbl')) {
-        const element = e.composedPath()[2];
+        const element = e.target.parentNode.parentNode;
         if (element === selected) selected.className = selected.className ? "" : "danger";
         else {
             if (selected) selected.className = "";
             element.className = "danger"; selected = element
         }
     } else if (e.target.matches('span.remove')) { 
-        data.splice(Array.prototype.indexOf.call(tbody.children, tbody.removeChild(e.composedPath()[3])), 1);
+        data.splice(Array.prototype.indexOf.call(tbody.children, tbody.removeChild(e.target.parentNode.parentNode.parentNode)), 1);
     }
 }
 for (let [key, fn] of Object.entries({