JavaScript insertAdjacentHTML() method

The Element interface's insertAdjacentHTML() method converts the given text to HTML or XML and puts the generated nodes into the DOM tree at a predetermined point.

To insert text as an HTML file at a certain point in the DOM, use the insertAdjacentHTML() method. The text in HTML can be changed or added Using this technique.

Syntax

The following syntax shows the method and its parameter in detail.

Parameters

The below two parameters and their sub-parts show the uses of the work method.

1) position

a string indicating the element's location relative to the string. It must be one of the strings listed below:

i) "beforebegin"

Before the element, use "beforebegin." Only true if the element has a parent element and is in the DOM tree.

ii) "afterbegin"

The "afterbegin" is used immediately after the element's first child.

iii) "beforeend"

The "beforeend" is used immediately after the element's last child.

iv) "afterend"

After the element, the "afterend" position works for the function. Only true if the element has a parent element and is in the DOM tree.

2)text

The text will be converted to HTML or XML and added to the tree.

Return Value

The webpage with the given change will be returned. There are four possible legal position values.

Examples

The examples show the multiple operations with the method using position and text.

Example1

The following program uses the afterbegin position with specific text using the JavaScript insertAdjacentHTML() method. Here, we can use the simple position and text.

Output

The afterbegin data inserted into the web page shows in the below image.

Example2

The following program uses the afterend position with specific text using the JavaScript insertAdjacentHTML() method.

Output

The afterend data inserted into the web page shows in the below image.

Example3

The following program uses the beforebegin position with specific text using the JavaScript insertAdjacentHTML() method.

Output

The beforebegin data inserted into the web page shows in the below image.

Example4

The following program uses the beforeend position with specific text using the JavaScript insertAdjacentHTML() method.

Output

The beforeend data inserted into the web page shows in the below image.

Example5

The following program uses the JavaScript insertAdjacentHTML() method to use all positions with specific text.

Output

The image shows the javascript insertAdjacentHTML method's information.

Supported Browsers

The following browsers and their versions are supported by DOM insertAdjacentHTML() Method in Javascript:

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

Conclusion

The javascript insertAdjacentHTML method is used in the web pages as the document object method. It inserts single or multiple texts using a function or event. The method placed information using multiple positions and styles. It creates user-friendly user functionality and initially saves more data in a small space.