This page is In Progress

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

nextElementSibling

Summary

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

Property of dom/Elementdom/Element

Syntax

Note: This property is read-only.

var result = element.nextElementSibling;

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