Skip to content
Related Articles

Related Articles

HTML | DOM insertAdjacentHTML() Method

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Jun, 2022

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
PositionsEffect
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. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM insertAdjacentHTML() Method
    </title>
    <style>
            h1,
        h2 {
            color: green;
            text-align: center;
        }
         
        div {
            width: 80%;
            height: 240px;
            border: 2px solid green;
            padding: 10px;
    </style>
</head>
 
<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>

Output : Before click on the button:

 

After click on the button:

  

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

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM insertAdjacentHTML() Method
    </title>
    <style>
            h1,
        h2 {
            color: green;
            text-align: center;
        }
         
        div {
            width: 80%;
            height: 240px;
            border: 2px solid green;
            padding: 10px;
    </style>
</head>
 
<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>

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: The browser supported by DOM insertAdjacentHTML() Method are listed below:

  • Google Chrome 1.0
  • Edge 17.0
  • Internet Explorer 4.0
  • Firefox 8.0
  • Opera 8.0
  • Safari 4.0

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!