Insert a specified HTML text into a specified position in the JavaScript document?

Javascript Web Development Front End Technology

In this article, we are going to learn how to insert a specified HTML text into a specified position in the JavaScript document with suitable examples.

There is an existing method in the JavaScript to insert a specified HTML text into a specified position in the JavaScript document i.e. insertAdjacentHTML() method. There are four specified legal positions. The first position is ‘afterbegin’, the second is ‘afterend’, third is ‘beforebegin’ and the fourth legal position is ‘beforeend’.

Let’s use the above discussed specified legal postions in the examples below.

Syntax

The syntax to insert a specified HTML text into a specified position using insertAdjacentHTML() method is −

element.insertAdjacentHTML(position, text);

Where,

Element is the HTML element (<a>, <p>, <strong>, <span>) where the other element needs to be inserted.
Position is the position where the text needs to be added. There are four possible options: beforebegin, afterbegin, beforeend, afterend.
Text is the text which is to be added.

Example 1

This is an example program to insert a specified HTML text into a specified position using beforebegin in the JavaScript document.

<!DOCTYPE html>
<html>
<head>
   <title>Insert a specified HTML text into a specified position in the JavaScript document?</title>
</head>
<body style="text-align: center;">
   <h4>Inserting a specified HTML text into a specified position in the JavaScript document using insertAdjacentHTML()</h4>
   <p id="p1" >Success is the child of audacity.</p>
   <p id="p2" >Success is never accidental.</p>
   <p id="p3">Applause waits on success.<
      var node = document.getElementById('p2');
      node.insertAdjacentHTML("beforebegin","<p>Success is dependent on effort.</p>"); // Inserting the text at the end of p tag with id="p2"
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 2

This is an example program to insert a specified HTML text into a specified position using afterbegin in the JavaScript document.

<!DOCTYPE html>
<html>
<head>
   <title>Insert a specified HTML text into a specified position in the JavaScript document?</title>
</head>
<body style="text-align: center;">
   <h4>Inserting a specified HTML text into a specified position in the JavaScript document using insertAdjacentHTML()</h4>
   <p id="p1" >Success is the child of audacity.</p>
   <p id="p2" >Success is never accidental.</p>
   <p id="p3">Applause waits on success.</p>
   <script>
      var node = document.getElementById('p2');
      node.insertAdjacentHTML("afterbegin","<p>Success is dependent on effort.</p>"); // Inserting the text at the end of p tag with id="p2"
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 3

This is an example program to insert a specified HTML text into a specified position using beforeend in the JavaScript document.

<!DOCTYPE html>
<html>
<head>
   <title>Insert a specified HTML text into a specified position in the JavaScript document?</title>
</head>
<body style="text-align: center;">
   <h4>Inserting a specified HTML text into a specified position in the JavaScript document using insertAdjacentHTML()</h4>
   <p id="p1" >Success is the child of audacity.</p>
   <p id="p2" >Success is never accidental.</p>
   <p id="p3">Applause waits on success.</p>
   <script>
      var node = document.getElementById('p2');
      node.insertAdjacentHTML("beforeend","<p>Success is dependent on effort.</p>"); // Inserting the text at the end of p tag with id="p2"
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 4

This is an example program to insert a specified HTML text into a specified position using afterend in the JavaScript document.

<!DOCTYPE html>
<html>
<head>
   <title>Insert a specified HTML text into a specified position in the JavaScript document?</title>
</head>
<body style="text-align: center;">
   <h4>Inserting a specified HTML text into a specified position in the JavaScript document using insertAdjacentHTML()</h4>
   <p id="p1" >Success is the child of audacity.</p>
   <p id="p2" >Success is never accidental.</p>
   <p id="p3">Applause waits on success.</p>
   <script>
      var node = document.getElementById('p2');
      node.insertAdjacentHTML("afterend","<p>Success is dependent on effort.</p>"); // Inserting the text at the end of p tag with id="p2"
   </script>
</body>
</html>