Javascript DOM HTML Node cloneNode Method copy children element

Introduction

Copy a <div> element, including all its attributes and child elements, and append it to the document.

Click the button to copy the div element above, including all its attributes and child elements, and append it to the document.

View in separate window 

<!DOCTYPE html>
<html>
<body>

<div style="border:1px solid black;background-color:pink">
  <p style="color:red;">A p element</p>
  <p style="color:green;">A p element</p>
  <p style="color:blue;">A p element</p>
</div>/*from   w w w .  j  a  va  2  s  .  c o  m*/
<button onclick="myFunction()">Test</button>

<script>
function myFunction() {
  var elmnt = document.getElementsByTagName("DIV")[0];
  var cln = elmnt.cloneNode(true);
  document.body.appendChild(cln);
}
</script>

</body>
</html>



PreviousNext

Related