TheinsertAdjacentText() method of theElement interface, given a relative position and a string, inserts a new text node at the given position relative to the element it is called from.

Syntax

insertAdjacentText(where, data)

Parameters

where

A string representing the position relative to the element the method is called from; must be one of the following strings:

• 'beforebegin': Before theelement itself.
• 'afterbegin': Just inside theelement, before its first child.
• 'beforeend': Just inside theelement, after its last child.
• 'afterend': After theelement itself.

data

A string from which to create a new text node to insert at the given positionwhere relative to the element the method is called from.

Return value

None (undefined).

Exceptions

SyntaxErrorDOMException

Thrown ifwhere is not a recognized value.

Visualization of position names

<!-- beforebegin --><p>  <!-- afterbegin -->  foo  <!-- beforeend --></p><!-- afterend -->

Examples

beforeBtn.addEventListener("click", () => {  para.insertAdjacentText("afterbegin", textInput.value);});afterBtn.addEventListener("click", () => {  para.insertAdjacentText("beforeend", textInput.value);});

Have a look at ourinsertAdjacentText.htmldemo on GitHub (see thesource code too.) Here we have a simple paragraph. You can enter some text into the formelement, then press theInsert before andInsert after buttons toinsert it before or after the existing paragraph text usinginsertAdjacentText(). Note that the existing text node is not added to —further text nodes are created containing the new additions.

Specifications

Browser compatibility

See also

• Element.insertAdjacentElement()
• Element.insertAdjacentHTML()