HTML JS

CLONE HTML ELEMENTS IN JAVASCRIPT

(quick guide & examples)

THE HTML <div id="src"><p>Hi!</p></div> <div id="dest"></div>

CLONE ELEMENT

01

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);

INNER HTML

02

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");

OUTER HTML

03

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");

TEMPLATE CLONE (A)

04

HTML TEMPLATE <template id="src">   <tr><td class="cell"></td></tr> </template> TARGET TABLE  <table id="dest"></table>

TEMPLATE CLONE (B)

05

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); }