The nextSibling property retrieves the subsequent node of a specified node as a Node object. If the node in question is the final element in the list, the property will return null. The nextSibling property reveals the element that precedes the designated one at the same hierarchical level within the tree structure. This property is read-only for web pages.
The property is utilized to present the nextSibling node, which must return the subsequent sibling node as either a text node, an element node, or a comment node. It is important to mention that the children property is effective for retrieving all the children of a given element.
Syntax
The syntax provided below retrieves the subsequent sibling node from the list.
node.nextSibling
Return value
- The property shows a node's next sibling as an element.
- The property shows a null if the next sibling node does not available.
Note Don't put whitespace between two elements already close to each other, or the result will be "undefined."
Supported Browsers
Here is a list of the browsers that the nextSibling property works with:
- Google Chrome version 1 and up
- Edge 12 or higher and
- Internet Explorer 5.5 or higher
- Firefox 1 or higher
- Opera 12.1 or higher
- Safari 1 or higher
Examples
The subsequent example demonstrates how to retrieve the output of various values or nodes by utilizing the nextSibling property.
Example 1
The fundamental nextSibling property in the JavaScript example presented below is utilized to retrieve the subsequent sibling node of the second node. The results are showcased using the innerHTML, console, and alert functions.
<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling property does not support white space in the list tag. </p>
<p> Given Example list:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (fourth) </li></ul>
<p> Click the button below to get the second node's next sibling in the given list. </p>
<button onclick = "myclickFunction()"> Click Here </button>
<p id = "demo_var_value"></p>
<script>
function myclickFunction() {
var var_value = document.getElementById("item2").nextSibling.innerHTML;
document.getElementById("demo_var_value").innerHTML = var_value;
}
</script>
</body>
</html>
Output
The illustration displays the value of the next sibling node as a result.
Example 2
The fundamental property nextSibling provides output via the console log function. In this scenario, we can retrieve the next sibling node that follows the third node.
<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling property does not support white space in the list tag. </p>
<p> Given Example list:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (fourth) </li></ul>
<p> Click the below button to get the next in the console tab. </p>
<button onclick = "myclickFunction()"> Click Here </button>
<script>
function myclickFunction() {
var var_value = document.getElementById("item3").nextSibling.innerHTML;
console.log("The nextSibling Property in javascript ");
console.log(var_value);
}
</script>
</body>
</html>
Output
The displayed image illustrates the value of the subsequent sibling node as the result.
Example 3
The fundamental nextSibling property in JavaScript, along with a conditional example, is presented below. This property allows us to retrieve the value of the next sibling node if it exists. When the next sibling node is present, the property returns its corresponding list value. Conversely, if there are no next sibling nodes available, the property returns a null value.
<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling property does not support white space in the list tag. </p>
<p> Given Example list: </p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (fourth) </li></ul>
<p> Click the below button to get the next sibling of the second node in the given list </p>
<button onclick = "myclickFunction()"> Click Here </button>
<p id = "demo_var_value"></p>
<script>
function myclickFunction() {
var var_value = document.getElementById("item4").nextSibling;
console.log(var_value);
if(var_value == null){
document.getElementById("demo_var_value").innerHTML = "The nextSibling node does not available : " +var_value;
}else{
document.getElementById("demo_var_value").innerHTML = var_value;
}
}
</script>
</body>
</html>
Output
The illustration displays the value of the next sibling node as its output. The output returns a null value due to the absence of the next sibling node.
Example 4
The fundamental property nextSibling in JavaScript can be illustrated with the following conditional example. In this scenario, we can retrieve the value of the next sibling node provided that the list is formatted without any spaces. If there is a space inserted within the list tag, the data will result in an undefined value.
<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling property does not support white space in the list tag. </p>
<p> Given Example list: </p>
<ul>
<li id = "item1"> HTML (First) </li>
<li id = "item2"> CSS (second) </li>
<li id = "item3"> Javascript (Third) </li>
<li id = "item4"> Jquery (fourth) </li>
</ul>
<p> Click the below button to get the next sibling of the second node in the given list </p>
<button onclick = "myclickFunction()"> Click Here </button>
<p id = "demo_var_value"></p>
<script>
function myclickFunction() {
var var_value = document.getElementById("item2").nextSibling;
console.log(var_value);
if(var_value == null){
document.getElementById("demo_var_value").innerHTML = "The nextSibling node does not available : " +var_value;
}else{
document.getElementById("demo_var_value").innerHTML = var_value;
}
}
</script>
</body>
</html>
Output
The output image displays an undefined value, represented by a blank space within the list.
Example 5
The fundamental nextSibling property in JavaScript, along with a conditional example, is demonstrated below. In this instance, we can retrieve the next sibling nodes of the first, third, and last nodes concurrently.
<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling property does not support white space in the list tag. </p>
<p> Given Example list:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> Javascript (Third) </li><li id = "item4"> Jquery (fourth) </li></ul>
<p>Click the below button to get the next sibling of the second node in the given list</p>
<button onclick="myclickFunction()"> Click Here </button>
<p id = "demo_var_value"></p>
<p id = "demo_var_value2"></p>
<p id = "demo_var_value3"></p>
<script>
function myclickFunction() {
var var_value = document.getElementById("item1").nextSibling.innerHTML;
document.getElementById("demo_var_value").innerHTML = "the second nodes next sibling node : "+var_value;
var var_value2 = document.getElementById("item3").nextSibling.innerHTML;
document.getElementById("demo_var_value2").innerHTML = "the last nodes next sibling node : "+var_value2;
var var_value3 = document.getElementById("item4").nextSibling;
if(var_value3 == null){
document.getElementById("demo_var_value3").innerHTML = "The nextSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The nextSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>
Output
The illustration shows that the value of the next sibling node is presented as output. This output yields null since there is no next sibling node present.
Example 6
The property known as the next sibling node is applicable to all elements devoid of whitespace. It presents information in a list format, although it does not have to enumerate tags specifically.
<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> The Javascript nextSibling property does not support white space in the list tag. </p>
<div><p id = "item1"> C# Tutorial </p><p id = "item2"> TutorialsandExample </p></div>
<button onclick="myclickFunction()"> Click Here </button>
<p id = "demo_var_value" style="color:red;"></p>
<p id = "demo_var_value2" style="color:orange;"></p>
<p id = "demo_var_value3" style="color:green;"></p>
<script>
function myclickFunction() {
var var_value = document.getElementById("item1").nextSibling.innerHTML;
document.getElementById("demo_var_value").innerHTML = "the second nodes next sibling node : "+var_value;
var var_value3 = document.getElementById("item2").nextSibling;
if(var_value3 == null){
document.getElementById("demo_var_value3").innerHTML = "The nextSibling node does not available : " +var_value3;
}else{
document.getElementById("demo_var_value3").innerHTML = "The nextSibling node of third node : " +var_value3;
}
}
</script>
</body>
</html>
Output
The illustration shows the subsequent sibling nodes that follow the second node.
Conclusion
The nextSibling property is utilized to identify the subsequent element in relation to the current object within a collection. It is applicable to list tags or any other tags formatted in a list structure. Moreover, we can utilize list objects and items without any whitespace appearing on the HTML page.