JavaScript Element lastElementChild Property

What You’ll Learn

Element.lastElementChild is a read-only instance property that returns the last child element, or null when none exist. Learn how it differs from lastChild, how it relates to children, and how to use it safely—with five examples and try-it labs.

Introduction

When you need the last nested tag inside a parent—not a trailing text node from whitespace— lastElementChild is the direct read.

It is ideal for grabbing the final list item, table row, or card section without filtering childNodes yourself.

const list = document.getElementById("list");
console.log(list.lastElementChild.textContent);

Understanding the Property

MDN: the read-only lastElementChild property returns the element’s last child element, or null if there is no such child.

• Read-only — re-read after DOM changes to get the current last element.
• Element or null — never returns text or comment nodes.
• Element-only view — same last item as children[children.length - 1] when present.
• Baseline — widely available since July 2015 (MDN).

📝 Syntax

lastElementChild

Value

An Element reference for the last child element, or null when the parent has no element children. Always check for null before reading properties like textContent.

📋 MDN List Example Shape

MDN reads the last list item’s text from a ul:

<ul id="list">
  <li>First (1)</li>
  <li>Second (2)</li>
  <li>Third (3)</li>
</ul>

const list = document.getElementById("list");
console.log(list.lastElementChild.textContent);
// Third (3)

Related learning: children, firstElementChild, and lastChild.

Examples Gallery

Examples follow MDN Element: lastElementChild. Labs use simple lists and containers so you can compare element-only reads safely.

const list = document.getElementById("list");
console.log(list.lastElementChild.textContent);

Third (3)

const box = document.getElementById("box");
console.log({
  lastChildType: box.lastChild.nodeName,
  lastElementChildTag: box.lastElementChild.tagName
});

{
  "lastChildType": "#text",
  "lastElementChildTag": "SPAN"
}

const empty = document.getElementById("empty");
console.log(empty.lastElementChild); // null
console.log(empty.lastChild !== null); // may still have a text node

null
true

const box = document.getElementById("box");
const last = box.children[box.children.length - 1];
console.log(box.lastElementChild === last); // true
console.log(box.lastElementChild.tagName); // P

true
P

console.log({
  supported: "lastElementChild" in Element.prototype,
  returns: "Element or null",
  tip: "Check for null before reading properties",
  status: "Baseline Widely available (MDN)"
});

{
  "supported": true,
  "returns": "Element or null",
  "tip": "Check for null before reading properties",
  "status": "Baseline Widely available (MDN)"
}

🚀 Common Use Cases

• Reading the last row, list item, or tab panel element.
• Skipping trailing whitespace text nodes that lastChild would return.
• Empty-state checks when no element children exist (null).
• Quick access instead of children[children.length - 1] with clearer intent.
• Pairing with firstElementChild for first/last element reads.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available).
• Returns null, not undefined, when no element children exist.
• From the ParentNode mixin—also on Document and DocumentFragment.
• Related: innerHTML, children, firstElementChild, localName, JavaScript hub.

💡 Best Practices