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.
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
Please Login to comment...