1. What is appendChild ?

Ans : यह javaScript के द्वारा html element और text को आपस में जोड़ता है । यह सबसे last child के रूप में insert होता है ।

Syntax :

.appendChild()

2. What is insertBefore ?

insertBefore का use किसी specific tag से पहले JavaScript के द्वारा new element और उसके text को insert करने के लिए क्या जाता है ।

Syntax :

.insertBefore

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>


<script>
      //create element
      var a = document.createElement("h1");
      console.log(a);

      //create text
      var b = document.createTextNode("Teach Coders");
      //append dom
      a.appendChild(b);

      //append with selector
      document.querySelector(".teach").appendChild(a)  
 </script>
 
 <script>
      //use this code with for each methood
      document.querySelectorAll("ul.teachbox li").forEach(myfunc);
      function myfunc(colum){
      var a = document.createElement("caption");
      var b = document.createTextNode("Teach Coders Logo");
      a.appendChild(b);
      colum.appendChild(a)
      }

  </script>

   <script>
   //insert before
      var a = document.createElement("h2");
      var b = document.createTextNode("Teach Coders Photo");
      a.appendChild(b);
      var c = document.querySelector("ul.teachbox li");
      c.insertBefore(a, c.childNodes[1]);
      }

  </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>