HTML JS

DUPLICATE HTML ELEMENTS IN JAVASCRIPT

<div id="source">Hello World!</div> <div id="dest"></div>   CLONE SOURCE INTO DESTINATION let source = document.getElementById ("source"); let dest = document.getElementById ("dest"); let clone = source.cloneNode(true); clone.removeAttribute("id"); dest.appendChild(clone);

CLONE ELEMENT

01

<div id="source">Hello World!</div> <div id="dest"></div>   CLONE SOURCE INTO DESTINATION let source = document.getElementById ("source"); let dest = document.getElementById ("dest"); let clone =  source.innerHTML; dest.innerHTML = clone;

INNER HTML

02

OUTER HTML

03

<div id="source">Hello World!</div> <div id="dest"></div>   CLONE SOURCE INTO DESTINATION let source = document.getElementById ("source"); let dest = document.getElementById ("dest"); let clone =  source.outerHTML; clone = clone.replace(' id="source"', "");  dest.innerHTML = clone;

TEMPLATE CLONE (A)

04

<template id="source">   <tr> <td class="cell"></td> </tr> </template>   <table id="dest"></table>

TEMPLATE CLONE (B)

05

CLONE 5 ROWS FROM TEMPLATE let source = document.getElementById ("source"); let dest = document.getElementById ("dest");

for (let i=1; i<=5; i++) {   let clonerow = document.importNode   (source.content, true);   let clonecell = clonerow.querySelectorAll   ("td");   clonecells[0].innerHTML = "Cloned " + i;   dest.appendChild(clonerow); }