NextSibling Property in Javascript

The nextSibling property gets the next node of the given node as a Node object. If the given node is the last item in the list, then the node object gets null. The nextSibling property shows the element that came before the one you specify in the same level of the tree. This property can be read only for the web page.

The property is used to display nextSibling node, and it needs to return the next sibling node as a text node, element node, or comment node. Note that the children's property works to get back all of an element's children.

Syntax

The following syntax gives the next sibling node of 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 following example gets the output of the multiple values or nodes using the nextSibling property.

Example 1

The basic nextSibling property in the javascript example gets below. Here we can get the next sibling node of the second node. The output is displayed in 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 image shows the next sibling node's value as an output.

Example 2

The basic nextSibling property shows output in the console log function. Here we can get the next sibling node of 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 image shows the next sibling node's value as an output.

Example 3

The basic nextSibling property in javascript with condition example gets below. Here we can get the next sibling node's available value. The property displays the list value if the next sibling node is available. The property gets a null value if the next sibling nodes are unavailable.

<!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 image shows the next sibling node's value as an output. The output gets a null value because the next sibling node is unavailable.

Example 4

The basic nextSibling property in javascript with condition example gets below. Here we can get the next sibling node's available value if the list gives without space. The list tag place space than the data gets undefined.

<!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

As an output, the image shows an undefined value (space in the list ).

Example 5

The basic nextSibling property in javascript with condition example shows below. Here we can get the next sibling nodes of the first, third, and last node simultaneously.

<!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 image displays the next sibling node's value as an output. The output is null because the next sibling node is unavailable.

Example 6

The next sibling node property is used for all tags without whitespace. It displays data as a list but does not necessarily list tags.

<!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"> JavaTpoint </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 image displays the next sibling nodes of the second nodes.

Conclusion

The nextSibling property helps to find out the next element of the object from the list. We can use a list tag or other tag in the list format. We can use list objects and items without whitespace on the html page.

Next TopicPreviousSibling Property in Javascript

← prev next →