HTML DOM lastChild Property
Element ObjectExample
Get the HTML content of the last child node of an <ul> element:
The result of x will be:
More "Try it Yourself" examples below.
Definition and Usage
The lastChild property returns the last child node of the specified node, as a Node object.
The difference between this property and lastElementChild, is that lastChild returns the last child node as an element node, a text node or a comment node (depending on which one's last), while lastElementChild returns the last child node as an element node (ignores text and comment nodes).
Note: Whitespace inside elements is considered as text, and text is considered as nodes (See "More Examples").
This property is read-only.
Tip: Use the element.childNodes property to return any child node of a specified node.
Tip: To return the first child node of a specified node, use the firstChild property.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| lastChild | Yes | Yes | Yes | Yes | Yes |
Syntax
Technical Details
| Return Value: | A Node object, representing the last child of a node, or null if there are no child nodes |
|---|---|
| DOM Version | Core Level 1 Node Object |
More Examples
Example
In this example, we demonstrate how whitespace may interfare with this property.
Get the node name of the last child node of a <div> element:
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the last child node of <div> is a #text node, and not the <span> element you expected
-->
<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById("myDIV").lastChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
The result of x will be:
Example
However, if we remove the whitespace from the source, there are no #text nodes in <div>, which will make the <span> element the last child node:
<script>
var x = document.getElementById("myDIV").lastChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
The result of x will be:
Example
Get the text of the last child node of a <select> element:
The result of x will be:
Related Pages
HTML DOM reference: node.firstChild Property
HTML DOM reference: node.childNodes Property
HTML DOM reference: node.parentNode Property
HTML DOM reference: node.nextSibling Property
HTML DOM reference: node.previousSibling Property
HTML DOM reference: node.nodeName Property
