HTML - DOM Element insertAdjacentElement() Method

Quiz

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

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

TheinsertAdjacentText()is similar to this function, but instead of inserting element, it inserts a new text content.

Syntax

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

element.insertAdjacentElement(position, elementToInsert);

Parameters

This method accepts two parameters as mentioned below −

Parameter	Description
position	Specifies where to insert the HTML content relative to the element: beforebegin afterbegin beforeend afterend
elementToInsert	New element to be inserted into the structure.

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 any value.

Example 1: Inserting New Element beforebegin

The following program demonstrates the usage of the HTML DOM Element insertAdjacentElement() by inserting a new <p> element "before the beginning" of the existing <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   .con {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element insertAdjacentElement() Method</h3> 
<p>The container starts the existing content.</p>
<p>Adds content before the existing element....</p> 
<div id="con">
<h2 id="sectionLabel">Before:</h2>
<p>This is the existing content.</p>
</div>    
<button onclick="addNewElement()">Add Before Begin</button>
<script>
   function addNewElement() {
      let newElement = document.createElement('p');
      newElement.textContent ='New content - beforebegin';
      newElement.style.backgroundColor = 'lightgreen';
      document.getElementById('con').insertAdjacentElement('beforebegin', 
	  newElement);
      document.getElementById('sectionLabel').textContent= 'After:';
   }
</script>
</body>
</html>

The above program inserts a new paragraph (<p>) element with the text "New content - beforebegin" before the "div" element.

Example 2: Inserting New Element afterbegin

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

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   .container {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
   }
</style>
</head>
<body>
<h1>HTML DOM Element</h1>
<h2>insertAdjacentElement() Method</h2>
<p>The container(box) starts the existing content.</p>
<p>Adds content after the existing element....</p>     
<div id="container" class="container">
   <h3 id="sectionLabel">Before:</h3>
   <p>This is the existing content.</p>
</div> 
<button onclick="addNewElement()">Add New Element After Beginning</button>
<script>
function addNewElement() {
   let newElement = document.createElement('p');
   newElement.textContent = 'New content - afterbegin';
   newElement.style.backgroundColor = 'lightblue';  
   document.getElementById('container').insertBefore(newElement,
   document.querySelector('#container > h3'));    
   document.getElementById('sectionLabel').textContent = 'After:';
}
</script>
</body>
</html>

Once the above program is executed, it creates and inserts a new "p" element with content "New content - afterbegin".

Example 3: Inserting new Element beforeend

In the example below, the insertAdjacentElement() method inserts a new <p> element just "before the end" of the existing <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   .container {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element insertAdjacentElement() Method</h3>
<p>Container marks the content's end..</p>
<p>Adds content before the existing element....</p>     
<div class="container" id="myContainer">
<h3>Before:</h3>
<p>This is the existing content.</p>
</div>
<button onclick="addNewElement()">Add New Element Before End</button> 
<script>
   function addNewElement() { 
      let newElement = document.createElement('p');
      newElement.textContent = 'New content beforeend';
      newElement.style.backgroundColor = 'lightblue'; 
      // Insert the new element before the existing one
      let container = document.getElementById('myContainer');
      container.insertAdjacentElement('beforeend', newElement);
   }
</script>
</body>
</html>

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

Example 4: Inserting new Element afterend

In the following example, the insertAdjacentElement() is used to insert a new <p> element "after the end" of the existing <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   .container {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element insertAdjacentElement() Method</h3>
<p>Container marks the content's end..</p>
<p>Adds new content after the existing one...</p>    
<div id="container" class="container">
<h3 id="sectionLabel">Before:</h3>
<p>This is the existing content.</p>
</div> 
<button onclick="addNewElement()">Add New Element After End</button>
<script>
function addNewElement() { 
   let newElement = document.createElement('p');
   newElement.textContent = 'New content - afterend';
   newElement.style.backgroundColor = 'lightcoral'; 
   // Insert new element after the existing one
   let existingElement = document.getElementById('container');
   existingElement.insertAdjacentElement('afterend', newElement); 
   let sectionLabel = document.getElementById('sectionLabel');
   sectionLabel.textContent = 'After:';
}
</script>
</body>
</html>

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

Supported Browsers

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

html_dom_element_reference.htm

Print Page