Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
nextElementSibling
Collapse the table of content
Expand the table of content

nextElementSibling property

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

Internet Explorer 9

 

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>

 

 

Community Additions

ADD
Show:
© 2015 Microsoft