NextSibling Property in Javascript

April 24, 2023

NextSibling Property in Javascript

NextSibling returns the next node of the given node as a Node object. In the event that the given node is the last item in the list, the node object will be null. The nextSibling property displays the element that came before the one you specify in the same level of the tree. The web page can only read this property.

In order to display nextSibling node, the property must return the next sibling node as a text node, element node, or comment node. The children’s property returns the children of an element.

Syntax

The following syntax indicates the next sibling node in the list.

node.nextSibling

Return value

A node’s next sibling is displayed as an element in the property.
If the next sibling node is not available, the property displays a null value.

Examples

The basic nextSibling property in the javascript example is shown below. Here we can obtain the next sibling node of the second node. Output is displayed in the innerHTML, console, and alert functions.

<!DOCTYPE html>
<html>
<body>
<h3> The nextSibling Property in javascript </h3>
<p> Example:</p>
<ul><li id = "item1"> HTML (First) </li><li id = "item2"> CSS (second) </li><li id = "item3"> React JS (Third) </li><li id = "item4"> Javascript (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>