VOOZH about

URL: https://www.geeksforgeeks.org/javascript/html-dom-insertadjacenthtml-method/

⇱ HTML DOM insertAdjacentHTML() Method - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

HTML DOM insertAdjacentHTML() Method

Last Updated : 13 Jun, 2023

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. 

Output : Before click on the button:

 👁 Image

After click on the button:

 👁 Image
 

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

Output : Before click on the button:

 👁 Image
 

After click on the button:

 👁 Image
 

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
Comment
Article Tags: