HTML DOM lastChild Property
Multi tool use
Clash Royale CLAN TAG#URR8PPP
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
HTML DOM lastChild Property
Element Object
Example
Get the HTML content of the last child node of an <ul> element:
var x = document.getElementById("myList").lastChild.innerHTML;<!--
The result of x will be:
TeaTry it Yourself »
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
node.lastChild<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
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:
#textTry it Yourself »
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:
<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById("myDIV").lastChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script><!--
The result of x will be:
SPANTry it Yourself »
Example
Get the text of the last child node of a <select> element:
var x = document.getElementById("mySelect").lastChild.text;<!--
The result of x will be:
VolvoTry it Yourself »
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
Element Object
