Note: using this property will return the last child no-matter if it’s an Element-Node, Text-Node or a Comment-Node. But there’s another property called lastChildElement which will return the last child of an element that is of type Element-Node! That means for the lastChildElement property, if the last child of an element is in fact of type Text-Node for example, that will be ignored and instead this property will look for the last child of an element that is of type Element-Node.
This property is read-only and so we can’t assign a new value to it.
The return value of this property is a reference to the last child of an element.
Note: If the target element does not have a child, then the return value of the property will be the value null.
Here if you click on the button of the page, the result will be a node of type text! But how? Isn’t it the last element of this list the <li> item?
Well, not exactly! If you look carefully, the last <li> item is set on a line above the <ol> element. That means we have a newline character which is a text-node right between the last <li> element and the <ol> element! So technically, the last child of the <ol> is this newline character (which is of type text-node).
For this reason, calling the lastChild property gives us this text-node (the newline character) instead of the last <li> element.
Note: you could remove the newline between the last <li> and the closing </ol> elements which in that case, this last <li> item becomes the last child of the <ol>.