- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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 a specified HTML text into a specified position in the 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>
- Related Articles
- Insert a specified element in a specified position in JavaScript?
- Insert the specified element at the specified position in Java CopyOnWriteArrayList
- Add text and number into specified position of cell in Excel
- In MySQL, how can we insert a substring at the specified position in a string?
- Insert an element into Collection at specified index in C#
- Insert an element into the ArrayList at the specified index in C#
- How to insert the elements of a collection into the List at the specified index in C#?
- Do you need text/javascript specified in your tags?
- Insert into OrderedDictionary with key and value at specified index in C#
- The listIterator() method AbstractList class in Java at a specified position
- Java Program to remove a character at a specified position
- Insert at the specified index in StringCollection in C#
- The listIterator() method of CopyOnWriteArrayList in Java starting at a specified position
- HTML DOM specified property
- Roll the specified axis backwards until it lies in a given position in Numpy
