The nextSibling property is used to return the next node of the specified node as a Node object or null if the specified node is the last one in the list. It is a read-only property.
Syntax:
node.nextSibling
Return value: This property returns a next sibling of the specified node or null if the current node has no next sibling.
Example: In this example, we will use the nextSibling property
HTML
<!DOCTYPE html>
<html>
<head>
<title>
DOM nextSibling Property
</title>
</head>
<body style="text-align: center">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
DOM nextSibling Property
</h2>
<div>
<span id="p1">
GeeksforGeeks!
</span><span id="p2">
A computer science portal for geeks.
</span>
</div>
<br>
<button onclick="geek()">Click me!</button>
<br>
<br>
<p id="p" style="margin:auto; width: 40%"></p>
<script>
function geek() {
let x =
document.getElementById("p1").nextSibling.innerHTML;
document.getElementById("p").innerHTML = x;
document.getElementById("p").style.color = "white";
document.getElementById("p").style.background = "green";
}
</script>
</body>
</html>
|
Output:
Note: Don’t put whitespace between two sibling elements, else the result will be “undefined”.
Supported Browsers: The browser supported by nextSibling property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 5.5 and above
- Firefox 1 and above
- Opera 7 and above
- Safari 1.1 and above
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
15 Jun, 2023
Like Article
Save Article