JavaScript lastChild
last modified April 2, 2025
In this article, we explore the lastChild property in JavaScript.
This property is essential for DOM traversal, allowing developers to access the
last child node of an element.
Basic Definition
The lastChild property returns the last child node of the specified
element. This includes all node types, not just element nodes. It's important
to note that whitespace and text nodes are also considered.
If the element has no children, lastChild returns null.
For element-only traversal, consider using lastElementChild instead.
Basic lastChild Example
This example demonstrates how to access the last child of a parent element.
<!DOCTYPE html>
<html>
<head>
<title>Basic lastChild</title>
</head>
<body>
<ul id="list">
<li>First item</li>
<li>Second item</li>
<li>Last item</li>
</ul>
<script>
const list = document.getElementById('list');
const lastItem = list.lastChild;
console.log(lastItem); // Might be text node due to whitespace
</script>
</body>
</html>
In this basic example, we have a ul element with three li children. The
JavaScript code retrieves the last child using lastChild.
Note that due to potential whitespace, this might return a text node instead
of the last li element. This demonstrates how lastChild considers
all node types.
Working with lastElementChild
This example shows how to use lastElementChild to get the last
element child specifically.
<!DOCTYPE html>
<html>
<head>
<title>lastElementChild</title>
</head>
<body>
<div id="container">
<p>First paragraph</p>
<p>Middle paragraph</p>
<p>Last paragraph</p>
</div>
<script>
const container = document.getElementById('container');
const lastPara = container.lastElementChild;
lastPara.style.color = 'red';
</script>
</body>
</html>
Here we have a div with three paragraph elements. The code uses
lastElementChild to specifically target the last element child.
This property ignores text and comment nodes, making it more predictable when you only want to work with element nodes. We then change the color of the last paragraph to red.
Checking for Children
This example demonstrates how to check if an element has children before
accessing lastChild.
<!DOCTYPE html>
<html>
<head>
<title>Checking for Children</title>
</head>
<body>
<div id="parent"></div>
<button onclick="checkChildren()">Check Children</button>
<script>
function checkChildren() {
const parent = document.getElementById('parent');
if (parent.hasChildNodes()) {
console.log('Last child:', parent.lastChild);
} else {
console.log('No children found');
}
}
</script>
</body>
</html>
In this example, we have an empty div and a button. When clicked, the function
checks if the div has any children before attempting to access lastChild.
This is a good practice to avoid errors when working with dynamic content where
the presence of children might be uncertain. The hasChildNodes
method helps ensure safe access.
Removing the Last Child
This example shows how to remove the last child of an element using
lastChild.
<!DOCTYPE html>
<html>
<head>
<title>Removing Last Child</title>
</head>
<body>
<ul id="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button onclick="removeLast()">Remove Last</button>
<script>
function removeLast() {
const list = document.getElementById('items');
if (list.lastChild) {
list.removeChild(list.lastChild);
}
}
</script>
</body>
</html>
Here we have a list with three items and a button. When clicked, the function
removes the last child of the list using removeChild with
lastChild as the parameter.
This demonstrates a common use case for lastChild in dynamic list
manipulation. The conditional check ensures we don't attempt to remove a child
when none exist.
Comparing firstChild and lastChild
This example compares firstChild and lastChild in a
single parent element.
<!DOCTYPE html>
<html>
<head>
<title>firstChild vs lastChild</title>
</head>
<body>
<div id="comparison">
<span>First span</span>
Some text
<span>Last span</span>
</div>
<button onclick="compare()">Compare</button>
<script>
function compare() {
const div = document.getElementById('comparison');
console.log('First child:', div.firstChild);
console.log('Last child:', div.lastChild);
}
</script>
</body>
</html>
In this example, we have a div containing two span elements with text in between. The function logs both the first and last child nodes when the button is clicked.
This demonstrates how both properties work in the same context and how they might return different types of nodes (element nodes vs text nodes) depending on the DOM structure.
Source
In this article, we have shown how to use the lastChild property
in JavaScript. This property is fundamental for DOM traversal and manipulation
in web development.
Author
List all JS DOM tutorials.