lastChild?The read-only lastChild property returns the node’s last child in the tree, or null if there are none (MDN). That child may be an element, text, or comment — not only a tag.
Status: Baseline Widely available (since March 2016) — not Deprecated, Experimental, or Non-standard. Trailing whitespace often makes lastChild a #text node — prefer lastElementChild for the last element.
parent.lastChild
→ last Node in childNodes (or null)
Same idea: parent.childNodes[parent.childNodes.length - 1]
May be:
Element → "SPAN", "TD", …
Text → "#text" (common with indented HTML)
Comment → "#comment"
Need last element only?
parent.lastElementChild| Goal | Prefer |
|---|---|
| Any last child node | lastChild |
| Last element child | lastElementChild |
| First child node | firstChild |
lastChildRead it, null-check, then inspect nodeName / nodeType.
parent.lastChild.null, use the node (or compare with lastElementChild).lastElementChild.| Piece | Required? | Role |
|---|---|---|
parent | Yes | Node whose last child you want |
| Return | — | Node or null |
| Writable? | No | Read-only |
child = parent.lastChild
if child is null:
parent has no children
else:
// may be #text because of trailing whitespace
name = child.nodeName
want a tag?
el = parent.lastElementChildKeep these facts handy when reading the last child.
| Topic | Detail |
|---|---|
| Returns | Node or null |
| Equals | Last entry of childNodes when children exist |
| Whitespace | Often yields trailing #text |
| Elements only | lastElementChild |
| Empty parent | null — check first |
| Standard | Baseline Widely available (since March 2016) |
Compare indented vs compact markup for the same visual content.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Log the last child’s nodeName when it exists.
const box = document.getElementById("box");
const child = box.lastChild;
if (child) {
console.log(child.nodeName);
} else {
console.log("no children");
}null.Indented markup often inserts a text node after the last tag.
const p01 = document.getElementById("para-01");
console.log(p01.lastChild.nodeName); // often "#text"</span> before </p>.Skip text/comments when you want the last tag (MDN tip).
const p = document.getElementById("para-01");
console.log(p.lastChild.nodeName);
console.log(p.lastElementChild.nodeName); // "SPAN"#text vs SPAN.Always guard before touching properties on the result.
const empty = document.getElementById("empty");
console.log(empty.lastChild); // null
console.log(empty.hasChildNodes()); // falseDrop lastChild once when it exists.
const box = document.getElementById("box");
if (box.lastChild) {
box.removeChild(box.lastChild);
}
console.log(box.lastChild && box.lastChild.nodeName);Check these before treating lastChild as “the last tag.”
MDN: any node type can be last — spaces/newlines after the last tag often become lastChild.
Always null-check before reading nodeName or calling methods on the result.
Use lastElementChild to skip text and comments.
Same rules at the other end of childNodes; pretty HTML often has #text at both ends.
Node.lastChild is marked Baseline Widely available on MDN (since March 2016).
Returns the last child Node or null. May be a text node from trailing whitespace. Prefer lastElementChild for the last element.
Bottom line: Safe everyday DOM API. Null-check, expect #text from pretty HTML, and use lastElementChild for tags. See the MDN lastChild reference.
| Approach | Cost | Best for |
|---|---|---|
lastChild | O(1) | Any last node type |
lastElementChild | O(1) | Last element tag |
childNodes[length - 1] | O(1) | Same as lastChild |
Reading either property is cheap. Choose by meaning (any node vs element), not by speed.
null if empty.#text after your last tag.lastElementChild.One line: lastChild is the last node in the child list — frequently trailing whitespace text in pretty HTML.
Learn how to walk to the next sibling node in the tree.
8 people found this page helpful