First and last child node of a specific node in JavaScript?

Javascript Object Oriented Programming Front End Technology

To get the first and last child nodes of a specific node, javascript has provided firstChild and lastChild methods respectively. let's discuss them in a nutshell.

FirstChild

syntax

node.firstChild;

Example

In the following example, there are three elements in the list node. Using the method "firstChild" the first element is found out and the result is displayed in the output.

Live Demo

<html>
<body>
<ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<p id="first"></p>
<script>
   var list = document.getElementById("list").firstChild.innerHTML;
   document.getElementById("first").innerHTML = list;
</script>
</body>
</html>

Output

Tesla
Spacex
Solarcity

Tesla

LastChild

syntax

node.lastChild;

Example-2

In the following example, there are three elements in the list node. Using the method "lastChild" the last element is found out and the result is displayed in the output.

Live Demo

<html>
<body>
<ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<p id="first"></p>
<script>
   var list = document.getElementById("list").lastChild.innerHTML;
   document.getElementById("first").innerHTML = list;
</script>
</body>
</html>

Output

Tesla
Spacex
Solarcity

Solarcity

Vineeth.mariserla

Published on 09-Aug-2019 13:38:42

Previous Page Print Page