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
Sibling of a list element in JavaScript?
In this article, we are going to learn about the sibling of a list element in JavaScript with suitable examples.
To find the sibling of a list element in JavaScript, there is an existing property called nextSibling. The nextSibling property returns the next node on the same tree level. The nextSibling returns a node object and it is a read-only property.
Note − The nextSibling propery returns the next sibling node: An element node, a comment node, a text node. The whitespaces in between the elements are also considered as text nodes.
Now, Let’s look into the syntax and usage of nextSibling property in JavaScript.
Syntax
The syntax to get the sibling of a list element in JavaScript is −
Node.nextSibling; or Node.nextElementSibling; or Node.previousSibling;
Where, Node is an element which can be ‘a’, ’p’, ’span’, ’strong’, etc. The sibling element is returned.
Example 1
This is an example program to get the sibling of a list element in JavaScript using nextSibling property.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sibling of a list element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Sibling of a list element in JavaScript using nextSibling property</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
</ul>
<p id="result"></p>
<script>
var ele = document.getElementById("m1").nextSibling;
document.getElementById('result').innerHTML = 'The next sibling for the id "m1" is : '+ele.innerHTML;
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 2
This is an example program to get the sibling of a list element in JavaScript using nextElementSibling property.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sibling of a list element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Sibling of a list element in JavaScript using nextElementSibling property</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
</ul>
<p id="result"></p>
<script>
var nxt_sibling = document.querySelector("#m1").nextElementSibling;
document.getElementById('result').innerHTML = 'The next sibling for the id "m1" is : '+nxt_sibling.innerHTML;
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 3
This is an example program to get the sibling of a list element in JavaScript using previousSibling property.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sibling of a list element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>Sibling of a list element in JavaScript using previousSibling property</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
</ul>
<p id="result"></p>
<script>
var ele = document.getElementById("m3").previousSibling;
document.getElementById('result').innerHTML = 'The next sibling for the id "m3" is : '+ele.innerHTML;
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 4
This is an example program to get the sibling of a list element in JavaScript using nextElementSibling property.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sibling of a list element in JavaScript</title>
</head>
<body style="text-align: center;">
<h4>To display all elements in a list using nextElementSibling property</h4>
<p>List of Top Mobile Selling Companies</p>
<ul id="Mobiles">
<li id="m1">Samsung</li>
<li id="m2">One plus</li>
<li id="m3">Apple</li>
<li id="m4">Oppo</li>
</ul>
<p id="result"></p>
<script>
var current_ele = document.querySelector("#m1");//Starting element
var next_ele = current_ele.nextElementSibling;
document.getElementById('result').innerHTML = 'TO display all the elements in a list :'+'<br/>'+'Current element : '+current_ele.innerHTML+'<br/>';
do{
document.getElementById('result').innerHTML += 'Next sibling : '+next_ele.innerHTML+'';next_ele = next_ele.nextElementSibling;
}while(next_ele);
</script>
</body>
</html>
On executing the above code, the below output is generated.
5K+ Views
