Practice Code
JavaScript Example (Program)
Learn Details

1. what is insertAdjacentElement with beforebegin ?

Ans : .insertAdjacentElement with beforebegin का use किसी tag के start होने से पहले append किये हुए element को insert करता है ।

Example : जैसे की <p> html element है और <strong> append element है।

तो इसका output :
<strong>Teach Coders</strong><p>hello World</p>

Syntax :

.insertAdjacentElement("beforebegin", html_element_name)

2. insertAdjacentElement with afterbegin

Ans :insertAdjacentElement with afterbegin का use किसी tag के start होने के बाद append किये हुए element को insert करता है ।

Example : जैसे की <p> html element है और <strong> append element है।

तो इसका output :
<p><strong>Teach Coders</strong>hello World </p>

Syntax :

.insertAdjacentElement("afterbegin", html_element_name)

3. insertAdjacentElement with afterend

Ans :insertAdjacentElement with afterend का use किसी tag के close होने से पहले append किये हुए element को insert करता है ।

Example : जैसे की <p> html element है और <strong> append element है।

तो इसका output :
<p>hello World <strong>Teach Coders</strong></p>

Syntax :

.insertAdjacentElement("afterend", html_element_name)

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 : insertAdjacentElement
 -----------------------------------------------
<script>
    // a :- insertAdjacentElement with beforebegin
      var my_element1 = document.createElement("strong");
       var my_text1 = document.createTextNode("Teach Coders");
       my_element1.append(my_text1);
       var my_selector = document.querySelector("ul.teachbox li p")
       my_selector.insertAdjacentElement("beforebegin", my_element1)  
 </script>

 <script>
    // b :- insertAdjacentElement with beforeend
      var my_element1 = document.createElement("strong");
       var my_text1 = document.createTextNode("Teach Coders");
       my_element1.append(my_text1);
       var my_selector = document.querySelector("ul.teachbox li p")
       my_selector.insertAdjacentElement("beforeend", my_element1)  
 </script>

 <script>
    // c :- insertAdjacentElement with afterbegin
      var my_element1 = document.createElement("strong");
       var my_text1 = document.createTextNode("Teach Coders");
       my_element1.append(my_text1);
       var my_selector = document.querySelector("ul.teachbox li p")
       my_selector.insertAdjacentElement("afterbegin", my_element1)  
 </script>

  <script>
    //d :- insertAdjacentElement with afterend
      var my_element1 = document.createElement("strong");
       var my_text1 = document.createTextNode("Teach Coders");
       my_element1.append(my_text1);
       var my_selector = document.querySelector("ul.teachbox li p")
       my_selector.insertAdjacentElement("afterend", my_element1)  
 </script>
-----------------------------------------------
 EXAMPLE 2 : insertAdjacentHTMl
 -----------------------------------------------
<script>
    // a :- insertAdjacentHTMl with beforebegin
      var my_element = "<strong>Welcome to our Website</strong>";
       var my_selector = document.querySelector("ul.teachbox li p");
       my_selector.insertAdjacentHTML("beforebegin", my_element) 
</script>

<script>
    // b :- insertAdjacentHTMl with beforeend
      var my_element = "<strong>Welcome to our Website</strong>";
       var my_selector = document.querySelector("ul.teachbox li p");
       my_selector.insertAdjacentHTML("beforeend", my_element) 
</script>

<script>
    // c :- insertAdjacentHTMl with afterbegin
      var my_element = "<strong>Welcome to our Website</strong>";
       var my_selector = document.querySelector("ul.teachbox li p");
       my_selector.insertAdjacentHTML("afterbegin", my_element) 
</script>

<script>
    // c :- insertAdjacentHTMl with afterend
      var my_element = "<strong>Welcome to our Website</strong>";
       var my_selector = document.querySelector("ul.teachbox li p");
       my_selector.insertAdjacentHTML("afterend", my_element) 
</script>

-----------------------------------------------
 EXAMPLE 3 : insertAdjacentText
 -----------------------------------------------
<script>
 
    // a :- insertAdjacentText with beforebegin
      var my_element = "Welcome to our Website";
       var my_selector = document.querySelector("ul.teachbox li p");
       my_selector.insertAdjacentText("beforebegin", my_element) 
</script>

<script>
    // b :- insertAdjacentText with beforeend
      var my_element = "Welcome to our Website";
       var my_selector = document.querySelector("ul.teachbox li p");
       my_selector.insertAdjacentText("beforeend", my_element) 
</script>

<script>
    // c :- insertAdjacentText with afterbegin
      var my_element = "Welcome to our Website";
       var my_selector = document.querySelector("ul.teachbox li p");
       my_selector.insertAdjacentText("afterbegin", my_element) 
</script>

<script>
    // c :- insertAdjacentText with afterend
      var my_element = "Welcome to our Website";
       var my_selector = document.querySelector("ul.teachbox li p");
       my_selector.insertAdjacentText("afterend", my_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>