JavaScript/HTML | Get Id of inner child element

Author - Kritika Sood

Suppose from html code below we want to get id of each <a> element inside home_menu.

<ul id="home_menu" class="appendmenu" style="float: left">
   <li>
         <span class="arrow sep">►</span>
         <a id="breadcrumb_mainc3" style="cursor:pointer;color:#087bb1;">Programming Courses</a>
     </li>
     <li>
        <span class="arrow sep">►</span>
        <a id="breadcrumb_sc34" style="cursor:pointer;color:#087bb1;">Javascript </a>
     </li>
     <li>
        <span class="arrow sep">►</span>
        <a id="breadcrumb_sc439" style="cursor:pointer;color:#087bb1;">javascript1 </a>
     </li>
     <li>
         <span class="arrow sep">►</span>
         <a id="breadcrumb_sc3940" style="cursor:pointer;color:#087bb1;">java script 2 </a>
   </li>
</ul>

Here is sample Javascript code to achieve this:

<script>
var list=document.getElementById("home_menu").getElementsByTagName("li");
 var arrL = [].slice.call(list);
 for (i = 0; i < (arrL.length)-1; i++) 
{
 var ahref = lis[i].getElementsByTagName("a");
 var b=ahref[0].id;   
}
</script>

Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need Web development or any other software development assistance please contact us at webdevelopment@webners.com

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *

Send your message