Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Insert HTML Text into a Specified Position in JavaScript Document
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>
882 Views
