HTML - DOM lastChild Property

Quiz

The HTML DOM lastChild property is used to access and retrieve the last child node of a specified parent element within the HTML DOM.

This property is useful for manipulating the DOM, as it allows developers to easily identify and interact with the last child, whether it is an element node, text node, or comment.

If the parent element has no children, lastChild will return null.

Syntax

Following is the syntax of HTML DOM lastChild property −

element.lastChild;

Parameters

Since it is a property, it does not accept any parameters.

Return Value

This property returns a node that points to the last child node of a specific parent element. If no last child exists, it returns 'null'.

Example 1: Accessing the lastChild of Div Element

The following is the basic example of the HTML DOM lastChild property. It retrieved the last child of a <div> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM lastChild</title>
</head>
<body>
<div id="parent">           
<span>First Span element</span>
<div>Second div</div>
<p>Last paragraph</p>    
</div>
<p>Click the below button to get the last child of div element.</p>
<button onclick="showLastChild()">Click me</button>
<div id="output"></div>
<script>
   function showLastChild() {
      // Selecting the parent div
      const parentDiv = document.getElementById('parent');
      // Retrieving the last child node
      const lastChildNode = parentDiv.lastElementChild;
      // Displaying the result
      const outputDiv = document.getElementById('output');
      outputDiv.innerHTML = `Last child node: ${lastChildNode.textContent}`;
  }
</script>
</body>
</html>

The above program returns the last child of a "div" element.

Example 2: Last Child Node of an "ul" Element

Following is another example of the HTML DOM lastChild element. We use this property to access the last child of the <ul> element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM lastChild</title>
<style> 
   ul { 
       padding: 0;
   }
   li { 
       border-bottom: 1px solid #ccc;
       padding: 5px;
   }
</style>
</head>
<body>
<h4>Below are 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>
<div id="output"></div>
<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>

Example 3: Modifying Last Child Content of Div Element

This example shows how to dynamically modify the content of the last child of a <div> element using the lastChild Property −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM lastChild</title>
</head>
<body>
<h4>This is the div content with their child nodes:</h4>
<div id="parent">
<p>First paragraph</p>
<div>Second div</div>
<span>Span element</span>
<p>Last paragraph</p>
</div>
<h3>Modified last child node:</h3>
<div id="output"></div>
<script>
   // Selecting the parent div
   const parentDiv = document.getElementById('parent');
   // Accessing and modifying the last child node
   const lastChildNode = parentDiv.lastChild;     
   // Displaying the updated content
   const outputDiv = document.getElementById('output');
   outputDiv.textContent = `Updated child node is: ${'Modified last paragraph'}.`;
</script>
</body>
</html>

Example 4: Inserting Last Child Dynamically

The example below shows the dynamic insertion of a new last child element into a list of items upon clicking a button using the lastChild property −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM lastChild</title>
<style> 
   .container {
      border: 1px solid #ccc; 
   }
   .highlight {
      background-color: #ffffcc;
      font-weight: bold;
   }
</style>
</head>
<body>
<p>Inserting a new Last Child dynamically..</p>
<div id="pt" class="container">
<p>First paragraph</p>
<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
<span>Span element</span>
<p>Last paragraph with some whitespace before closing tag</p>
</div>
<div class="container">
<button onclick="insertLastChild()">Insert Last Child</button></div>
<script>
   // Function to insert a new last child element
   function insertLastChild() {
      const pDiv = document.getElementById('pt');
      const lastChild = pDiv.lastChild;
      // Create a new element
      const newElement = document.createElement('p');
      newElement.textContent = 'New last child paragraph';
      // Insert the new element as the last child
      pDiv.insertBefore(newElement, lastChild.nextSibling);
      newElement.classList.add('highlight');
   }
</script>
</body>
</html>

Supported Browsers

Property
lastChild	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page