Element.lastElementChild is a read-only property that returns the parent’s last child Element, or null if there are no child elements (MDN).
Read the notes below before you get or set this property. Prefer feature detection when support is limited.
Use el.lastElementChild. Start with this line.
element.lastElementChild| Call | What it does |
|---|---|
element.lastElementChild | Primary signature. |
Built into the browser. Read or assign el.lastElementChild — no import required.
element.lastElementChild| Parameter | Description |
|---|---|
| Parent node | Required. Container that may have element children |
| children | Optional. Live list — last item matches when present |
| Return Value | Description |
|---|---|
| * | Element or null |
Log the text of the last <li> in a list (MDN shape).
const list = document.getElementById("list");
console.log(list.lastElementChild.textContent);
// "Third (3)"getElementById("list") returns the <ul>.lastElementChild. It is the last <li>.textContent is "Third (3)".null.lastElementChild vs lastChildWhitespace after a child element makes lastChild a text node.
const box = document.getElementById("box");
// <div id="box">\\n <span>Hi</span>\\n</div>
console.log(box.lastChild.nodeName); // "#text"
console.log(box.lastElementChild.tagName); // "SPAN"
console.log(box.lastElementChild.textContent); // "Hi"lastChild sees that text. nodeName is "#text".lastElementChild skips it. You get the <span>.lastElementChild.nullNo element children → null (and the last children slot is undefined).
const empty = document.createElement("div");
console.log(empty.lastElementChild); // null
console.log(empty.children[empty.children.length - 1]); // undefined
empty.textContent = "only text";
console.log(empty.lastElementChild); // nulldiv has no element children → null.children[…]. That index is undefined, not null.tagName or textContent.Element.lastElementChild is Baseline Widely available (MDN: since July 2015). Safe across modern and older evergreen browsers.
Read-only last child Element or null — ParentNode mixin, skips text and comments.
Bottom line: Safe for production. Prefer it over lastChild whenever you specifically need an Element child.
Learn how to read an element’s local name (tag name without namespace prefix).
11 people found this page helpful