JavaScript lastElementChild
last modified April 2, 2025
In this article, we explore the lastElementChild property in
JavaScript. This property is essential for DOM traversal, allowing developers
to access the last child element of any parent element efficiently.
Basic Definition
The lastElementChild property returns the last child element of
the specified element. It only considers element nodes, ignoring text nodes
and comments.
This property is read-only and returns null if the parent element
has no child elements. It provides a convenient way to access the last element
without needing to traverse all child nodes.
Basic lastElementChild Usage
This example demonstrates how to access the last child element of a div.
<!DOCTYPE html>
<html>
<head>
<title>Basic lastElementChild</title>
</head>
<body>
<div id="container">
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Last paragraph</p>
</div>
<script>
const container = document.getElementById('container');
const lastChild = container.lastElementChild;
console.log(lastChild.textContent);
</script>
</body>
</html>
In this basic example, we have a div with three paragraph elements. The
JavaScript code retrieves the container div and then accesses its last child
element using lastElementChild.
The console will log "Last paragraph", demonstrating how this property
quickly accesses the final element child. This is more efficient than
using childNodes and checking node types manually.
Styling the Last Element
This example shows how to style the last child element differently.
<!DOCTYPE html>
<html>
<head>
<title>Styling Last Element</title>
<style>
.item {
padding: 10px;
margin: 5px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const lastItem = list.lastElementChild;
lastItem.style.backgroundColor = '#ffcccc';
lastItem.style.fontWeight = 'bold';
</script>
</body>
</html>
Here we have an unordered list with three items. The JavaScript code finds
the last list item using lastElementChild and applies special
styling to it.
This demonstrates a common UI pattern where the last element needs different
styling. The lastElementChild property makes this task simple
and efficient.
Removing the Last Element
This example demonstrates how to remove the last child element from a parent.
<!DOCTYPE html>
<html>
<head>
<title>Removing Last Element</title>
</head>
<body>
<div id="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
<button onclick="removeLastImage()">Remove Last Image</button>
<script>
function removeLastImage() {
const gallery = document.getElementById('gallery');
const lastImage = gallery.lastElementChild;
if (lastImage) {
gallery.removeChild(lastImage);
}
}
</script>
</body>
</html>
In this example, we have an image gallery and a button. When the button is
clicked, the last image is removed using lastElementChild and
removeChild.
The code first checks if a last child exists before attempting removal. This prevents errors when the gallery is empty. This pattern is useful for dynamic content management.
Comparing with lastChild
This example highlights the difference between lastElementChild and lastChild.
<!DOCTYPE html>
<html>
<head>
<title>lastElementChild vs lastChild</title>
</head>
<body>
<div id="content">
Some text node
<p>Paragraph element</p>
Another text node
</div>
<script>
const content = document.getElementById('content');
console.log('lastChild:', content.lastChild);
console.log('lastElementChild:', content.lastElementChild);
</script>
</body>
</html>
This example shows a div containing mixed content: text nodes and an element.
The script logs both lastChild and lastElementChild
for comparison.
lastChild returns the last node (including text nodes), while
lastElementChild only returns the last element node. This
distinction is crucial when working with mixed content.
Dynamic List Management
This example shows how to use lastElementChild with dynamically created elements.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic List Management</title>
</head>
<body>
<ul id="taskList"></ul>
<input type="text" id="taskInput" placeholder="Enter task">
<button onclick="addTask()">Add Task</button>
<button onclick="completeLastTask()">Complete Last</button>
<script>
function addTask() {
const input = document.getElementById('taskInput');
if (input.value.trim() === '') return;
const list = document.getElementById('taskList');
const newItem = document.createElement('li');
newItem.textContent = input.value;
list.appendChild(newItem);
input.value = '';
}
function completeLastTask() {
const list = document.getElementById('taskList');
const lastTask = list.lastElementChild;
if (lastTask) {
lastTask.style.textDecoration = 'line-through';
lastTask.style.color = '#999';
}
}
</script>
</body>
</html>
This example creates a simple task manager. Users can add tasks and mark the
last task as complete. The lastElementChild property helps
identify the most recently added task.
The completeLastTask function uses lastElementChild
to find and style the last task. This demonstrates practical use in dynamic
web applications.
Source
MDN lastElementChild Documentation
In this article, we have shown how to use the lastElementChild
property in JavaScript. This property is fundamental for DOM traversal and
element manipulation in web development.
Author
List all JS DOM tutorials.