This page is Almost Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

previousElementSibling

Summary

Retrieves the element node that is a sibling to this element node (a direct child of the same parent) and is immediately previous to it in the DOM tree, ignoring text nodes, comment nodes and any other non-element nodes. If there is no previous element sibling, the property value is null. Read-only.

Property of dom/Elementdom/Element

Syntax

Note: This property is read-only.

var result = element.previousElementSibling;

Examples

This example shows how to get the content of a list using firstElementChild, nextElementSibling, previousElementSibling, and lastElementChild to traverse the document tree.

<!DOCTYPE html>
<html>
<head>
<title>IElementTraversal Example</title>
    <script>
        function GetListItems () {
            var list = document.getElementById ("girls");       // find our list
            var results = document.getElementById("results");   // get our results line element
            var oChild = list.lastElementChild;                 // start with the last item in list
            while (oChild) {                                    // get and display each item in list
               results.innerHTML += "<br/>" + oChild.innerHTML;
                oChild = oChild.previousElementSibling;         // get previous element in list
                }
        }
        function GetListItems2 () {
            var list = document.getElementById ("girls");       // find our list
            var results = document.getElementById("results");   // get our results line element
            var oChild = list.firstElementChild;                // start with the first item in list
            while (oChild) {                                    // get and display each item in list
                results.innerHTML += "<br />" + oChild.innerHTML;
                oChild = oChild.nextElementSibling;             // get next element in list
                }
        }
        function refresh()
           {
             window.location.reload( false );           //reload our page
           }
    </script>
</head>
<body>
    <ol id="girls">
        <li>Sugar</li>
        <li>Spice</li>
        <li>Everything nice</li>
    </ol>
    <p id="results">Girls have: </p>
    <p>
    <button onclick="GetListItems ();">Get list backwards</button>
    </p>
   <p>
    <button onclick="GetListItems2 ();">Get list forwards</button>
    </p>
    <p>
      <input type="button" value="Refresh page" onclick="refresh()"   />
    </p>
</body>
</html>

Syntax

Standards information

Attributions