HTML DOM lastChild Property

Last Updated : 13 Jun, 2023

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 nodes (depend 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: In this example, we will see the use of the DOM lastChild property

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM lastChild Property
    </title>
    <script>
        function geek() {
            let 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:

Example 2: In this example, we will see the use of the DOM lastChild property

html

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM lastChild Property
    </title>
    <script>
        function Geeks() {
            let 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>