Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM previousSibling Property
  • Last Updated : 26 Jul, 2019

The previousSibling property is used to return the previous node of the specified node as Node object or null if the specified node is the first in the list. It is a read-only property.
Syntax:

node.previousSibling

Return value: This property returns a previous sibling of the specified node or null if the current node has no previous sibling.
Example:




<html>
    <head>
       <title>DOM previousSibling Property</title>
    </head>
    <body style = "text-align: center">
        <h1 style = "color:green">
            GeeksforGeeks
        </h1>
          
        <h2>
            DOM previousSibling 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>
  
        <!-- Function to return the previous node.-->
  
        <script>
        function geek() {
          var x = 
              document.getElementById("p2").previousSibling.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:
previousSibling
After clicking the button:
previousSibling

Note: Don’t put whitespace between two sibling elements, else the result will be “undefined”.

Supported Browsers: The browser supported by previousSibling property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :