1. What is cloneNode ?

Ans : इसके द्वारा किसी element और उसके child element को copy किया जाता है। अगर copy किये हुए element को paste करना हो तो append method का use करना होता है।

Syntax :

.cloneNode(true/false)

Note :-

false parameter को use करने के बाद यह केवल element को copy करता है।
true parameter को use करने के बाद यह element और उसके value को copy करता है।
default parameter false होता है , मतलब की अगर कोई parameter नहीं input करेंगे तो वह false parameter होगा

Example

HTML Code


   <html>
   <head> </head>
    <body> 
       <div class="teach"></div>

                  <!--example 2-->
               <ul class="teachbox">
                  <li><img src="https://www.teachcoders.com/images/basic-javascript.jpg"><p>hello world</p></li>
                  <li><img src="https://www.teachcoders.com/images/basic-javascript.jp"><p>hello world</p></li>
                  <li><img src="https://www.teachcoders.com/images/basic-javascript.jp"><p>hello world</p></li>
                  <li><img src="https://www.teachcoders.com/images/basic-javascript.jp"><p>hello world</p></li>
               </ul>
    </body>
     </html>

  
-----------------------------------------------
 EXAMPLE 1 : cloneNode
 -----------------------------------------------
<script>
  var my_element = document.querySelector("ul.teachbox li");
  //only element copy
  //var copy_element = my_element.cloneNode(true);

  //now copy of element his value
  var copy_element = my_element.cloneNode(true);
  console.log(copy_element);

  // now paste element in dom
  var pate_element = document.querySelector(".paste");
  pate_element.appendChild(copy_element)
 </script>

Css Code


     <style>
  ul{
    display:flex;
  }
    ul li{
      width:20%;
      list-style:none;
    }
      ul li caption{
   width: 112%;
    text-align: center;
    display: block;
    font-size: 25px;
    padding-top:10px;
      }
    ul li img{
      width:100%;
    }
  </style>