HTML | DOM insertAdjacentHTML() Method

The DOM insertAdjacentHTML() method is used to insert a text as HTML file to a specified position. This method is used to change or add text as HTML.

Syntax :

node.insertAdjacentHTML(specify-position, text-to-enter)

Return Value : This will return the page with the specified change.

There are four legal position values that can be used.

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
Positions Effect
afterbegin : This will add text when the selected element just begin.
afterend : This will add text when the selected element just end.
beforebegin : This will add text when the selected element about to begin.
beforeend : This will add text when the selected element about to end.

Example-1: This is the example for the “afterbegin” position.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<style>
        h1,
    h2 {
        color: green;
        text-align: center;
    }
      
    div {
        width: 80%;
        height: 240px;
        border: 2px solid green;
        padding: 10px;
</style>
  
<body>
    <div>
        <h2>Welcome to</h2>
        <h1><u>GeeksforGeeks.!</u></h1>
        <h2 id="main"> HTML DOM insertAdjacentHTML() Method</h2>
    </div>
    <br>
    <button onclick="myFunction()">Click me.!</button>
  
    <script>
        function myFunction() {
            var h = document.getElementById("main");
         h.insertAdjacentHTML("afterbegin", 
         "<span style='color:green; "+
         "background-color: lightgrey; "+
         "width: 50%;'>This is Example of</span>");
        }
    </script>
  
</body>
  
</html>

chevron_right


Output :

Before click on the button:

After click on the button:

Example-2: This is the example for the “afterend” position.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<style>
        h1,
    h2 {
        color: green;
        text-align: center;
    }
      
    div {
        width: 80%;
        height: 240px;
        border: 2px solid green;
        padding: 10px;
</style>
  
<body>
    <div>
        <h2>Welcome to</h2>
        <h1><u>GeeksforGeeks.!</u></h1>
        <h2 id="main"> This is Example of</h2>
    </div>
    <br>
    <button onclick="myFunction()">Click me.!</button>
  
    <script>
        function myFunction() {
            var h = document.getElementById("main");
            h.insertAdjacentHTML("afterend", 
            "<span style='color:green; "+
                         "background-color: lightgrey;"+
                         "font-size: 25px; "+
                         "padding-left: 30px;"+
                         "padding-right: 30px;"+
                         "width: 50%;'>"+
                         "HTML DOM insertAdjacentHTML() Method"+
             "</span>");
        }
    </script>
  
</body>
  
</html>

chevron_right


Output :

Before click on the button:

After click on the button:

Note: Similarly “beforebegin” and “beforeend” can be used to add text in HTML.

Supported Browsers:

  • Google Chrome 1
  • Edge 4
  • Firefox 8
  • Safari 4
  • Opera 7


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.