nextElementSibling property

  • Article

Retrieves a reference to the sibling element that immediately follows or NULL if the element does not have any sibling elements that follow it.

 

Syntax

HRESULT value = object.get_nextElementSibling(IHTMLElement** p);

Property values

Type: Object

A reference to the following sibling element.

Standards information

Examples

This example shows how to get the content of a list by using firstElementSibling, nextElementSibling, previousElementSibling, and lastElementSibling.

 <!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>