JavaScript insertAdjacentHTML and insertAdjacentElement

insertAdjacentHTML

insertAdjacentHTML is used to insert HTML string at a specific position.

syntax

element.insertAdjacentHTML(position, text);

There are four possible value for position parameter -

Value	Description
'beforebegin'	Insert the HTML element before the specified element.
'afterbegin'	Insert the HTML element inside the specified element, but before its first child. Newly added element would be first child of the element.
'beforeend'	Insert the HTML element inside the specified element, but after its last child. Newly added element would be last child of the element.
'afterend'	Insert the HTML element after the specified element.

Datatype of position parameter is String and it's value is case sensitive

text parameter value is the HTML string which needs to be parsed and inserted into DOM tree.

insertAdjacentElement

insertAdjacentElement is used to insert a HTML element at a specific position.

syntax

element.insertAdjacentElement(position, element);

There are four possible value for position parameter -

Value	Description
'beforebegin'	Insert the HTML element before the specified element.
'afterbegin'	Insert the HTML element inside the specified element, but before its first child. Newly added element would be first child of the element.
'beforeend'	Insert the HTML element inside the specified element, but after its last child. Newly added element would be last child of the element.
'afterend'	Insert the HTML element after the specified element.

Datatype of position parameter is String

element parameter value is the element needs to be inserted into DOM tree.