ParentNode.lastElementChild

The ParentNode.lastElementChild read-only property returns the object's last child Element or null if there are no child elements.

Syntax

var childNode = elementNodeReference.lastElementChild; 

Example

<p id="para-01">
  <span>First span</span>
  <b>bold</b>
</p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.lastElementChild.nodeName)
</script>

In this example, the alert shows "B", which is the name of the last child node of the paragraph element.

Polyfill for Internet Explorer 8

This property is unsupported prior to IE9, so the following snippet can be used to add support to IE8:

// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if(!("lastElementChild" in document.documentElement)){
    Object.defineProperty(Element.prototype, "lastElementChild", {
        get: function(){
            for(var nodes = this.children, n, i = nodes.length - 1; i >= 0; --i)
                if(n = nodes[i], 1 === n.nodeType) return n;
            return null;
        }
    });
}

Specification

Browser compatibility

See also

• The ParentNode and ChildNode pure interfaces.
• Object types implementing this pure interface: Document, Element, and DocumentFragment.