Skip to content
Related Articles

Related Articles

HTML | DOM lastChild Property

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Jun, 2022
View Discussion
Improve Article
Save Article

The DOM lastChild property is used to return the last child of the specified node. It returns the last child nodes as text, comment or element node (depends on which occurs at last). It is a read-only property. 

Syntax:

node.lastChild

Return Value: It returns a node object which represents the last child of the node and null if there are no child elements. 

Example 1: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            DOM lastChild Property
        </title>
         
        <script>
            function geek() {
                var doc =
                document.getElementById("div").lastChild.innerHTML;
                 
                document.getElementById("p").innerHTML = doc;
                document.getElementById("p").style.color = "white";
                document.getElementById("p").style.background = "green";
            }
        </script>
    </head>
     
    <body style = "text-align: center;">
         
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
         
        <h2>
            DOM lastChild Property
        </h2>
         
        <div id = "div">
        <span>GeeksforGeeks! </span>
        <span>
            A computer science portal for geeks.
        </span></div>
        <br>
        <button onclick="geek()">Click me!</button>
         
        <p id="p"></p>
    </body>
</html>                   

Output: 

Before click on the button:

 lastChild 

After click on the button:

 lasChild 

Example 2: 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML DOM lastChild Property
        </title>
         
        <script>
            function Geeks() {
                var x =
                document.getElementById("sel").lastChild.text;
                 
                document.getElementById("p").innerHTML
                        = "Last child: " + x;
            }
        </script>
    </head>
     
    <body style = "text-align: center;">
         
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
         
        <h2>
            DOM lastChild Property
        </h2>
         
        <select id = "sel" size = "3">
            <option>Merge sort</option>
            <option>Quick sort</option>
            <option>Insertion sort</option></select>
        <br><br>
         
        <button onclick = "Geeks()">
            Click Here!
        </button>
         
        <p id="p"></p>
    </body>
</html>                   

Output: 

Before click on the button:

 lastChild 

After click on the button:

 lasChild 

Supported Browsers: The browser supported by lastChild property are listed below:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 6 and above
  • Firefox 1 and above
  • Opera 12.1 and above
  • Safari 1 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!