1. what is replaceChild ?

Ans : इस method के द्वारा किसी parent element के child Element मतलब की tag और उसके text को replace करने के लिए use किया जाता है।

Syntax :

parentElement.replaceChild(जिस element से replace करना चाहते हैं , मतलब की new_Element, जिस element को replace करना चाहते हैं , मतलब की old_Element)

2. what is removeChild ?

Ans : इस method के द्वारा किसी parent element के child Element मतलब की tag और उसके text को remove करने के लिए use किया जाता है।

Syntax :

parentElement.replaceChild(जिस element से remove करना चाहते हैं , मतलब की new_Element, जिस element को remove करना चाहते हैं , मतलब की old_Element)

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 : replaceChild
 -----------------------------------------------
<script>
  //repalace child element his text
  var my_new_element = document.createElement("h1");
  var my_new_Text = document.createTextNode("Teach Coders");
  my_new_element.append(my_new_Text);
  console.log(my_new_element)
  var my_selector = document.querySelector("ul.teachbox li");
  //var old_element = document.querySelector("ul.teachbox li p");
  var old_element = my_selector.children[1];
  my_selector.replaceChild(my_new_element, old_element)
 </script>
 
-----------------------------------------------
 EXAMPLE 2 : removeChild
 -----------------------------------------------
 <script>
   //remove children element and his text
    var my_selector = document.querySelector("ul.teachbox li");
    var old_element = my_selector.children[1];
    my_selector.removeChild(old_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>