Also updating append

Cloning the template content before growing it, expectedly, improves performance after adding and removing 10K rows. Without cloning, the large template persists in memory. It affects the page's responsiveness.

Author: mksunny1

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

@@ -9,7 +9,7 @@ let data = [], index = 1, i, lbl, selected;
 function create(n = 1000) { if (tbody.children.length) clear(); append(n); }
 function append(n = 1000) {
     const nt = nTemplates(n); let j = 0, r1, r2, r3;
-    const itemTemplate = document.getElementById('itemTemplate').content;
+    const itemTemplate = document.getElementById('itemTemplate').content.cloneNode(true);
     while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
     while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));
 

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

@@ -29,7 +29,7 @@ function set(n) {
 }
 function append(n = 1000) {
     const nt = nTemplates(n); let j = 0, r1, r2, r3;
-    const itemTemplate = document.getElementById('itemTemplate').content;
+    const itemTemplate = document.getElementById('itemTemplate').content.cloneNode(true);
     while (nt >= itemTemplate.children.length * 2) itemTemplate.appendChild(itemTemplate.cloneNode(true));
     while (nt > itemTemplate.children.length) itemTemplate.appendChild(itemTemplate.firstElementChild.cloneNode(true));