HTML DOM Element lastChild
Example
Return the HTML content of the last child node of an <ul> element:
Get the text of the last child node of a <select> element:
More examples below.
Description
ThelastChild property returns the last child node of a node.
ThelastChild property returns returns a node object.
ThelastChild property is read-only.
Important!
lastChild returns the list childnode: An element node, a text node, or a comment node.
Whitespace between elements are also text nodes.
Alternative:
ThelastElementChild property returns the last childelement (ignores text and comment nodes).
See Also:
Node Properties
Nodes vs Elements
In the HTML DOM terminology:
Nodes are all nodes (element nodes, text nodes, and comment nodes).
Whitespace between elements are also text nodes.
Elements are only element nodes.
childNodes vs children
childNodes returns childnodes (element nodes, text nodes, and comment nodes).
children returns childelements (not text and comment nodes).
firstChild vs firstElementChild
firstChild returns the first childnode (an element node, a text node or a comment node).Whitespace between elements are also text nodes.
firstElementChild returns the first childelement (not text and comment nodes).
lastChild vs lastElementChild
lastChild returns the last childnode (an element node, a text node or a comment node).Whitespace between elements are also text nodes.
lastElementChild returns the last childelement (not text and comment nodes).
Syntax
Return Value
| Type | Description |
| Node | The last child of a node.nullif no child exists. |
More Examples
This example demonstrates how whitespace may interfare:
Try to get the node name of the last child node of "myDIV":
<p>Looks like first child</p>
<p>Looks like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>
However, if you remove the whitespace from the source, there are no #text nodes in "myDIV":
<script>
let text = document.getElementById("myDIV").lastChild.nodeName;
</script>
Browser Support
element.lastChild is a DOM Level 1 (1998) feature.
It is fully supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
