HTML JS
(quick guide & examples)
THE HTML <div id="src"><p>Hi!</p></div> <div id="dest"></div>
GET SRC & DEST let s = document.getElementById("src"); let d = document.getElementById("dest");
CLONENODE() WILL CREATE EXACT 1-TO-1 COPY. REMEMBER TO REMOVE THE ID. let clone = s.cloneNode(true); clone.removeAttribute("id"); d.appendChild(clone);
estination
S.INNERHTML WILL ONLY TAKE THE INTERNAL <P>HI!</P> let clone = s.innerHTML; d.innerHTML = clone;
THE HTML <div id="src"><p>Hi!</p></div> <div id="dest"></div>
GET SRC & DEST let s = document.getElementById("src"); let d = document.getElementById("dest");
S.OUTERHTML ACTS LIKE CLONENODE(TRUE). REMEMBER TO REMOVE THE ID let clone = s.outerHTML; clone = clone.replace(' id="src"', ""); d.innerHTML = clone;
THE HTML <div id="src"><p>Hi!</p></div> <div id="dest"></div>
GET SRC & DEST let s = document.getElementById("src"); let d = document.getElementById("dest");
HTML TEMPLATE <template id="src"> <tr><td class="cell"></td></tr> </template> TARGET TABLE <table id="dest"></table>
GET SRC & DEST let s = document.getElementById("src"); let d = document.getElementById("dest");
CLONE 5 ROWS FROM TEMPLATE for (let i=1; i<=5; i++) { let r = document.importNode(s.content, true); let c = r.querySelectorAll("td"); c[0].innerHTML = "Cloned " + i; d.appendChild(r); }