HTML - DOM Element insertAdjacentText() Method

Quiz

The HTML DOM Element insertAdjacentText() method is used to insert new text content at a specific position relative to the element that calls this method. The term adjacent text refers to the new text being inserted in relation to the existing element.

Through this method, you can insert new text before or after the specified element in the document by specifying the relative position.

TheinsertAdjacentElement()is similar to this function, but instead of inserting text content, it inserts an element.

Syntax

Following is the syntax of the HTML DOM Element insertAdjacentText() method −

element.insertAdjacentText(position, text);

Parameters

This method accepts two parameters as mentioned below −

Parameter	Description
position	Specifies where to insert the Text Content relative to the element: beforebegin afterbegin beforeend afterend
text	A string of text to be inserted.

Position Options:

beforebegin: Places just before the specified element.
afterbegin: Inserts right after the start of the specified element's content.
beforeend: Inserts just before the end of the specified element's content.
afterend: Adds immediately after the specified element.

Return Value

This method does not return a value.

Example 1: Inserting Text Content beforebegin

The following is the basic example of the HTML DOM Element insertAdjacentText() method. It inserts a new text content "Text beforebegin" before the beginning of the existing paragraph (<p>) element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element insertAdjacentText()</title>
</head>
<body>
<h3>HTML DOM Element insertAdjacentText() Method</h3>
<p>Inserts new Text Content 'beforebegin'.</p>    
<p id="example1">This is an example element.</p>
<button onclick="insertBeforeBegin()">Insert beforebegin</button> 
<script>
   function insertBeforeBegin() {
      let element = document.getElementById('example1');
      element.insertAdjacentText('beforebegin', 'Text beforebegin ');
}
</script>
</body>
</html>

The above program inserts a new paragraph (text) before the existing paragraph (p) element.

Example 2: Inserting Text Content afterbegin

Here is another example of the HTML DOM Element insertAdjacentText() method. We use this method to insert a new text content "Text afterbegin" after beginning the existing paragraph (<p>) element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element insertAdjacentText()</title>
</head>
<body>
<h1>HTML - DOM Element</h1>
<h2>insertAdjacentText() Method</h2>
<p>Inserts new Text Content 'afterbegin'.</p>
<p id="example2">This is an example element.</p> 
<button onclick="insertAfterBegin()">Insert afterbegin</button>
<script>
   function insertAfterBegin() {
      let element = document.getElementById('example2');
      element.insertAdjacentText('afterbegin', 'Text afterbegin ');
   }
</script>
</body>
</html>

Once the above program is executed, it inserts a new paragraph (text) after beginning the existing paragraph element.

Example 3: Inserting Text Content beforeend

In the example below, the insertAdjacentText() method inserts a new text content "Text beforeend" just before the end of the existing <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM insertAdjacentText()</title>
<style>
   div{
      padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element insertAdjacentText() Method</h3>
<div>Inserts new Text Content 'beforeend'.</div>
<div id="example3">This is an example element.</div>    
<button onclick="insertBeforeEnd()">Insert beforeend</button> 
<script>
   function insertBeforeEnd() {
      let element = document.getElementById('example3');
      element.insertAdjacentText('beforeend', ' Text beforeend');
   }
</script>
</body>
</html>

When the button is clicked, a new text will be inserted just before the end of the existing "div" element.

Example 4: Inserting Text Content afterend

In the following example, the insertAdjacentText() is used to insert a new text content "Text afterend" after the end of the existing <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element insertAdjacentText()</title>
<style>
   div{
      padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element insertAdjacentText() Method</h3>
<div>Inserts new Text Content 'afterend'.</div>
<div id="example4">This is an example element.</div>  
<button onclick="insertAfterEnd()">Insert afterend</button>
<script>
   function insertAfterEnd() {
      let element = document.getElementById('example4');
      element.insertAdjacentText('afterend', ' Text afterend');
   }
</script>
</body>
</html>

It inserts a new content after the end of the existing "div" element.

Supported Browsers

Method
insertAdjacentText()	Yes 5.0	Yes 12.0	Yes 8.0	Yes 5.0	Yes 11.50

html_dom_element_reference.htm

Print Page