Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
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
How To Add An HTML Element Starting After One And Finishing Before Another One?
This article shows how to add an HTML element in between two existing elements. This is a common task when creating webpages, and can be achieved with a few simple steps. We will be using the JavaScript API to access and manipulate the elements on our webpage.
The task we are going to perform in this article is adding an HTML element, starting after one and finishing before another one. For this, we are going to use insertBefore() method.
Using insertBefore() method
The Node interface's insertBefore() method places a node as a child of a given parent node ahead of a reference node. insertBefore() transfers the specified node to the new place if it already exists in the document.
Syntax
Following is the syntax for insertBefore() -
insertBefore(newNode, referenceNode)
For a better idea of how to add an HTML element starting after one and finishing before another one, let’s look at the following examples.
Example
In the following example, we are running the script for adding an HTML element, starting after one and finishing before another one.
<!DOCTYPE HTML>
<html>
<body>
<style type="text/css">
#tutorial {
background-color: lightblue;
}
</style>
<hr id="tutorial1">
<p id="tutorial2"> Welcome To TutorialsPoint</p>
<span>The Best E Learning Platform</span>
<hr/>
<script>
const statement = document.getElementById('tutorial1')
let next = statement.nextSibling
const div = document.createElement('div')
statement.parentNode.insertBefore(div, next)
div.setAttribute('id', 'tutorial')
while (next) {
let node = next
next = next.nextSibling
div.appendChild(node)
if (!next || next.nodeName == 'null') break
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of text that gets displayed, starting after one and finishing before another, with a CSS style applied and displayed on the webpage.
Example
Considering the following example where we are running the script using the insertBefore() method.
<!DOCTYPE html>
<html>
<body style="background-color:#E8DAEF">
<ol id="tutorial">
<li>RX100</li>
<li>DUCATI</li>
</ol>
<script>
const tutorial = document.createElement("li");
const add = document.createTextNode("CARS");
tutorial.appendChild(add);
const list = document.getElementById("tutorial");
list.insertBefore(tutorial, list.children[1]);
</script>
</body>
</html>
On running the above script, the output will pop up, displaying the list item "cars" that gets added between the provided list by using the insertBefore() method has been displayed on the webpage.
Example
Execute the below script and observe how we are going to add the HTML element using insertBefore().
<!DOCTYPE html>
<html>
<body style="background-color:#CCCCFF">
<h1>Click on the button to insert anelement before Monkey</h1>
<ul id="tutorial">
<li>Monkey</li>
<li>Donkey</li>
</ul>
<button onclick="insertelement()">Insert Element</button>
<script>
function insertelement() {
var statement= document.createElement("li");
var add = document.createTextNode("Pegion");
statement.appendChild(add);
var list = document.getElementById("tutorial");
list.insertBefore(statement, list.childNodes[1]);
}
</script>
</body>
</html>
When the script gets executed, it will generate an output consisting of list items along with a click button on the webpage. When the user clicks the buttons, the HTML elements get inserted.
86 Views
