/

HTML / CSS / JavaScript Tutorial

JavaScript DOM HTML property: lastElementChild

[this page | pdf | back links]

The lastElementChild property of HTML elements within the JavaScript DOM returns the last child element of the element.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
<p>See JavaScript. Following paragraph contains</p>
<p id="x0">[A] <span id="x1">[B] </span><span id="x2">[C] </span></p>
(where [B] and [C] are in elements, [A] and [D] in nodes)
<p id="x3"></p>
<script>
var n0 = document.getElementById("x0");
var txt = document.createTextNode("[D]");
n0.appendChild(txt);
var n1 = document.getElementById("x1");
var n2 = document.getElementById("x2");
var n3 = document.getElementById("x3");
n3.innerHTML = "Then the contents of different nodes / elements are: <br><br>"
  + "firstChild of paragraph: " + n0.firstChild.textContent +"<br>"
  + "firstElementChild of paragraph: " + n0.firstElementChild.textContent + "<br>"
  + "lastChild of paragraph: " + n0.lastChild.textContent + "<br>"
  + "lastElementChild of paragraph: " + n0.lastElementChild.textContent + "<br>"
  + "nextElementSibling of B: " + n1.nextSibling.textContent + "<br>"
  + "nextSibling of C: " + n2.nextSibling.textContent + "<br>"
  + "previousElementSibling of C: " + n2.previousElementSibling.textContent + "<br>"
  + "previousSibling of B: " + n1.previousSibling.textContent + "<br>"
  + "lastElementChild of parent of B: " + n1.parentNode.lastElementChild.textContent;
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile