HTML - DOM Element insertAdjacentHTML() Method

Quiz

The HTML DOM Element insertAdjacentHTML() method is used to insert a specified HTML code (for eg. <p>Hello world</p>) at a specific position relative to the element that calls this method.

It allows you to add the HTML at various positions, such as: before being, end, after begin and, end of the specified element.

Syntax

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

element.insertAdjacentHTML(position, html);

Parameters

This method accepts two parameters as listed below −

Parameter	Description
position	Specifies where to insert the HTML content relative to the element, beforebegin, afterbegin, beforeend, afterend.
html	The HTML string 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 any value.

Example 1: Inserting HTML Code afterend

The following program demonstrates the usage of the HTML DOM Element insertAdjacentHTML() method by inserting a paragraph (<p>) element after the end of the existing <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element insertAdjacentHTML</title>
<style>
   .container {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
   }
   .new-content {
      background-color: #d6ffff; 
   }
</style>
</head>
<body>
<h3>HTML DOM Element insertAdjacentHTML() Method</h3>
<p>Inserts new HTML content 'afterend'.</p> 
<div id="container" class="container"> 
   <h4>Existing content within this container.<h4>
</div>
<button onclick="insertAfterEnd()">Insert afterend</button>
<script>
   function insertAfterEnd() {
      let container = document.getElementById('container');
      container.insertAdjacentHTML('afterend', 
	  '<div class="new-content">New content-afterend</div>');
   }
</script>
</body>
</html>

The above program inserts an adjacent before the existing "div" element.

Example 2: Inserting HTML code beforeend

Following is another example of the insertAdjacentHTML() method. This method inserts a new <p> element with the text New content-beforeend just before the end of the existing <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element insertAdjacentHTML()</title>
<style>
   .container {
   border: 1px solid #ccc;
   padding: 10px;
   margin: 10px;
   }
   .new-content {
   background-color: #b3e0ff;
   }
</style>
</head>
<body>
<h3>HTML DOM Element insertAdjacentHTML() Method</h3>
<p>Inserts new HTML content 'beforeend'.</p>        
<div id="container" class="container">
   <h4>Existing content within this container.<h4>
</div> 
<button onclick="insertBeforeEnd()">Insert beforeend</button>   
<script>
   function insertBeforeEnd() {
      let container = document.getElementById('container');
      container.insertAdjacentHTML('beforeend',
        '<div class="new-content">New content-beforeend</div>'
   );
}
</script>
</body>
</html>

When the button clicks the adjacent will be added before end of this existing "div".

Example 3: Inserting HTML code afterbegin

The following example shows the usage of the insertAdjacentHTML() method to insert a new <p> element with the text New content-afterbegin just after the beginning of the existing <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element insertAdjacentHTML()</title>
<style>
   .container {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
   }
   .new-content {
      background-color: #99ff99; 
   }
</style>
</head>
<body>
<h3>HTML DOM Element insertAdjacentHTML() Method</h3>
<p>Inserts new HTML content 'beforebegin'.</p>
<div id="container" class="container">
   <h4>Existing content within this container.<h4>
</div> 
<button onclick="insertAfterBegin()">Insert afterbegin</button>
<script>
function insertAfterBegin() {
   let container = document.getElementById('container');
   container.insertAdjacentHTML('afterbegin', 
   '<div class="new-content">New content-afterbegin</div>'
   );
}
</script>
</body>
</html>

The above program inserts a paragraph just after the end of the existing "div" element.

Example 4: Inserting HTML Code beforebegin

This example below inserts a new<p>element with the text New content-beforebegin just before the existing<div>element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element insertAdjacentHTML</title>
<style>
   .container {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
   }
   .new-content {
      background-color: #ff8080; 
   }
</style>
</head>
<body>
<h3>HTML DOM Element insertAdjacentHTML() Method</h3>
<p>Inserts new HTML content 'beforebegin'.</p>    
<div id="container" class="container">
   <h4>Existing content within this container.<h4>
</div>
<button onclick="insertBeforeBegin()">Insert beforebegin </button>
<script>
   function insertBeforeBegin() {
       let container = document.getElementById('container');
       container.insertAdjacentHTML('beforebegin', 
       '<div class="new-content">New content-beforebegin</div>'
       );
   }
</script>
</body>
</html>

Supported Browsers

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

html_dom_element_reference.htm

Print Page