In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > lastElementChild

lastElementChild property

Browser support:

9	3.5

Returns a reference to the last child element of the current element.

Note: The lastElementChild property is supported in Firefox from version 3.5 and Internet Explorer from version 9.

The last child node and the last child element can be different. A node is an element node if it's nodeType is 1 (Node.ELEMENT_NODE). Text nodes and comment nodes are not element nodes. If you need the last child node of an element, use the lastChild property.

The children collection contains all child elements of an element in source order. Since the children collection is supported widely by browsers, so you can use the last item from the children collection instead of the lastElementChild property.

Note: The children collection also contains the child comment nodes in Internet Explorer before version 9. In other browsers, it only contains the element nodes.

Similarly to the lastElementChild property, the firstElementChild property returns the first child element of an element, furthermore the nextElementSibling and previousElementSibling properties return the next and previous sibling element of an element.

Syntax:

object.lastElementChild;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Reference to the last child element or null if it does not exist.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the lastElementChild and previousElementSibling properties:

<head>
    <script type="text/javascript">
        function GetListItems () {
            var list = document.getElementById ("myList");

            if ('previousElementSibling' in list) {
                var child = list.lastElementChild;
                while (child) {
                    alert (child.innerHTML);
                    child = child.previousElementSibling;
                }
            }
            else {
                var child = list.lastChild;
                while (child) {
                    if (child.nodeType == 1 /*Node.ELEMENT_NODE*/) {
                        alert (child.innerHTML);
                    }
                    child = child.previousSibling;
                }
            }
        }
    </script>
</head>
<body>
    <ol id="myList">
        <li>Apple</li>
        <li>Peach</li>
        <li>Cherry</li>
    </ol>
    <button onclick="GetListItems ();">Get the list items backwards!</button>
</body>