JavaScript Node lastChild Property

What You’ll Learn

The Node.lastChild property returns a node’s last child, or null if there are none. Learn the trailing whitespace #text gotcha, lastChild vs lastElementChild, and five practical examples with try-it labs.

Introduction

lastChild is a shortcut for “give me the last entry in childNodes.” Pair it with firstChild when you walk from either end of a parent’s children.

The surprise for beginners: pretty-printed HTML inserts whitespace text nodes after the last tag, so lastChild is often #text instead of the last element you see.

Understanding lastChild

MDN: the read-only lastChild property returns the node’s last child in the tree, or null if the node has no children. It may be a Text or Comment node—not only an element.

• Can be an element, text node, comment, or other node type.
• Trailing whitespace between tags creates #text nodes.
• Same idea as the last item in childNodes, or null when length is 0.
• Read-only — you do not assign to lastChild.

📝 Syntax

const last = node.lastChild;
if (last) {
  console.log(last.nodeName);
}

Return value

A Node, or null if there are no children.

⚖️ lastChild vs lastElementChild

Examples Gallery

Examples follow MDN Node.lastChild patterns. Use View Output or Try It Yourself for each case.

// <p id="para-01">
//   <span>Last span</span>
// </p>

const p01 = document.getElementById("para-01");
console.log(p01.lastChild.nodeName); // "#text"

#text

// <p id="para-01"><span>Last span</span></p>

const p01 = document.getElementById("para-01");
console.log(p01.lastChild.nodeName); // "SPAN"

SPAN

const p = document.getElementById("para-01");
console.log(p.lastChild.nodeName);          // often "#text"
console.log(p.lastElementChild.nodeName);   // "SPAN"

#text
SPAN

const empty = document.createElement("div");
console.log(empty.lastChild); // null

if (empty.lastChild) {
  console.log(empty.lastChild.nodeName);
} else {
  console.log("No children");
}

null
No children

// <tr id="row1"><td>A</td><td>B</td><td>C</td></tr>

const tr = document.getElementById("row1");
const cornerTd = tr.lastChild;

console.log(cornerTd.nodeName);      // "TD"
console.log(cornerTd.textContent);   // "C"

TD
C

🚀 Common Use Cases

• Grab the last cell / item — tables, lists, and toolbars (MDN-style).
• Inspect trailing text — read a text node after the last tag.
• Teach the DOM — show why indented HTML creates ending #text.
• Prefer elements for UI — switch to lastElementChild for tags.
• Clear from the end — while (el.lastChild) el.removeChild(el.lastChild).

📝 Notes

• Baseline Widely available (MDN, since March 2016).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Whitespace and comments can be the last child.
• Use lastElementChild when you only want elements.
• Related: firstChild, nextSibling, childNodes, isConnected, JavaScript hub.

💡 Best Practices