HTML - DOM Element lastElementChild Property

Quiz

The HTML DOM Element lastElementChild property retrieves the last child element among the child elements of a selected parent element. If no last-child element exists within the parent element, it will return null.

This property is similar to the lastChild property, but there are some differences between them as follows:

The lastChild property returns the last child node of any type, including text nodes and comment nodes.

The lastElementChild property only returns the last child, which is an element node.

Syntax

Following is the syntax of the HTML DOM Element lastElementChild property −

element.lastElementChild;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns a node that holds the last child element of a parent element.

Example 1: Getting the Last Child of a Div ELement

The following is the basic example of the HTML DOM Element lastElementChild property. It displays the last child of the <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element lastChildElement</title>     
</head>
<body>
<h3>HTML DOM Element lastElementChild Property</h3>
<p>Contents of Div Elements are:</p>
<div class="box" id="parent">
   <div>First paragraph</div>
   <div>Second div</div>
   <span>Span element</span>        
</div>
<hr>
<p id="output"></p>
<script> 
   const parentDiv = document.getElementById('parent');
   // Retrieving the last child element
   const lastele = parentDiv.lastElementChild;
   // Displaying the last child element
   const outputDiv = document.getElementById('output');
   outputDiv.textContent = `Last child element: 
   ${lastele.tagName}`;
</script>
</body>
</html>

The above program displays the last child of the "div" element.

Example 2: Last Child Node of an ul Element

Following is another example of the HTML DOM Element lastElementChild property. This property is used to retrieve the last child element of the list (<ul>) element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element lastElementChild</title>
<style> 
   ul { 
       padding: 0;
   }
   li { 
       border-bottom: 1px solid #ccc;
       padding: 5px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element lastChild Property</h3>
<h4>Below is a List of ul items :</h4>
<ul id="myList">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
   <li>DSA</li>
</ul>
<button onclick="showLastChild()">Get the last child</button>
<p id="output"></p>
<script>
   function showLastChild() {
      // Selecting the ul element
      const myList = document.getElementById('myList');           
      // Displaying the last child content
      const outputDiv = document.getElementById('output');
      outputDiv.textContent = `Last child: 
      ${myList.lastElementChild.textContent}`;
   }
</script>
</body>
</html>

When the button is clicked, the last element (or item) of a list will be displayed.

Example 3: Retrieving the Last Child of a Table Element

In the example below, we use the lastElementChild property to retrieve the last of the <table> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element lastElementChild</title>
<style>
   button{
      padding: 8px;
   }
   table th, td{
      width: 33%;
      text-align: center;
      border: 1px solid green;
      padding: 8px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element lastElementChild Property</h3>
<h4>Below is a table of the students records:</h4>
<table id="my_table">
   <tr>
      <th>Name</th>
      <th>Email</th>
   </tr>
   <tr>
      <td>Aman</td>
      <td>aman@gmail.com</td>
   </tr>
</table>
<button onclick="showLastChild()">Get the last child</button>
<p id="output"></p>
<script>
   function showLastChild() {
      // Selecting the table element
      const myTable = document.getElementById('my_table');           
      // Displaying the last child element's content
      const outputDiv = document.getElementById('output');
      outputDiv.textContent = `Last child: 
	  ${myTable.lastElementChild.innerHTML}`;
   }
</script>
</body>
</html>

The above program displays the last child of the table.

Supported Browsers

Property
lastElementChild	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page