Summary: in this tutorial, you’ll learn how to use the insertAdjacentHTML() method to insert HTML into the document.
Introduction to JavaScript insertAdjacentHTML() method
The insertAdjacentHTML() is a method of the Element interface so that you can invoke it from any element.
The insertAdjacentHTML() method parses a piece of HTML text and inserts the resulting nodes into the DOM tree at a specified position:
element.insertAdjacentHTML(positionName, text);Code language: JavaScript (javascript)The insertAdjacentHTML() method has two parameters:
1) position
The positionName is a string that represents the position relative to the element. The positionName accepts one of the following four values:
'beforebegin': before the element'afterbegin': before its first child of the element.'beforeend': after the last child of the element'afterend': after the element
Note that the 'beforebegin' and 'afterend' are only relevant if the element is in the DOM tree and has a parent element.
The insertAdjacentHTML() method has no return value, or undefined by default.
The following visualization illustrates the position name: