Skip to content
Related Articles

Related Articles

HTML | DOM nextSibling Property
  • Last Updated : 26 Jul, 2019

The nextSibling property is used to return the next node of the specified node as 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:




<!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() {
            var 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:
Before clicking the button:
nextSibling
After clicking the button:
nextSibling
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
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :