Fill <a> tag using <h2> text in array

Question

I'm new to JavaScript, so I'm not sure what keywords to search to find my specific answer. Thanks in advance for your help.

I need to dynamically create li tags with a href s in the nav . These will scroll to 4 different sections in main .
I have created each li and a href .
I now need to get the text from each h2 to the a element in each li I have started by creating an array from the h2 elements, but now realized that I could use the outerHTML from the previous array.
How can I get the h2 text, or access the outerHTML property from the sectionIds array?

 //creates a element and assigns to listItemHref const listItemHref = document.createElement('a'); //assigns #nav_list or ul to variable navList const navList = document.querySelector('#nav_list'); //creates array from id's in section elements const sectionIds = Array.from(document.getElementsByTagName('section')); //creates array of h2 const sectionH2 = Array.from(document.getElementsByTagName('h2')); for (section of sectionIds){ //creates a <li> element for each section name const listItem = document.createElement('li'); //creates an <a> element for each section name const listItemHref = document.createElement('a'); //sets the "href" for each <a> element listItemHref.setAttribute("href", "#" + section.id); listItem.setAttribute("class", "line_item"); listItem.appendChild(listItemHref); navList.appendChild(listItem); } //code to take h2 text and insert into a tag text for (heading of sectionH2){ //? not sure }

 <header class="page_header" id="home"> <h1>Resume</h1> <!--each li is created using JavaScript--> <nav class="nav_menu"> <ul id="nav_list"> <li class="line_item"> <a href="#education"></a></li> <li class="line_item"> <a href="#my_projects"></a></li> <li class="line_item"> <a href="#about"></a></li> <li class="line_item"> <a href="#contact"></a></li> </ul> </nav> </header> <main> <section id="education"> <h2>My Education</h2> </section> <section id="my_projects"> <h2>My Projects</h2> </section> <section id="about"> <h2>About Me</h2> </section> <section id="contact"> <h2>Contact Me</h2> </section> </main>

Answer 1

You can get the text for all of "h2" elements by doing this:

section.querySelector('h2').outerText

Also, you need to add the text to each "li" element like this:

let text = document.createTextNode(section.querySelector('h2').outerText);
listItem.appendChild(text);

Here's a working solution:

 //creates a element and assigns to listItemHref const listItemHref = document.createElement('a'); //assigns #nav_list or ul to variable navList const navList = document.querySelector('#nav_list'); //creates array from id's in section elements const sectionIds = Array.from(document.getElementsByTagName('section')); for (section of sectionIds){ const listItem = document.createElement('li'); let text = document.createTextNode(section.querySelector('h2').outerText); listItem.appendChild(text); //creates an <a> element for each section name const listItemHref = document.createElement('a'); //sets the "href" for each <a> element listItemHref.setAttribute("href", "#" + section.id); listItem.setAttribute("class", "line_item"); listItem.appendChild(listItemHref); navList.appendChild(listItem); }

 <header class="page_header" id="home"> <h1>Resume</h1> <!--each li is created using JavaScript--> <nav class="nav_menu"> <ul id="nav_list"> </ul> </nav> </header> <main> <section id="education"> <h2>My Education</h2> </section> <section id="my_projects"> <h2>My Projects</h2> </section> <section id="about"> <h2>About Me</h2> </section> <section id="contact"> <h2>Contact Me</h2> </section> </main>

Answer 2

If I understand you correctly, you want to copy the text from each h2 tag and place it inside the anchor tag. You actually don't need another loop to do this. With your HTML code, since each section only has one element (the h2), you can simply retrieve the h2 using: const h2 = section.firstElementChild .

If there are other elements but only one h2 in each section, then I would recommend using the querySelector function. This allows you to more easily search for elements. So instead of Array.from(document.getElementsByTagName('section')); , you can write document.querySelectorAll('section'); . Then within your loop, you can search for an h2 using: const h2 = section.querySelector('h2');

Note: To use the querySelector on the section element, the section element must also have been retrieved using the querySelector.

 //creates a element and assigns to listItemHref const listItemHref = document.createElement('a'); //assigns #nav_list or ul to variable navList const navList = document.querySelector('#nav_list'); //creates array from id's in section elements const sections = document.querySelectorAll('section'); for (section of sections){ //creates a <li> element for each section name const listItem = document.createElement('li'); //creates an <a> element for each section name const listItemHref = document.createElement('a'); //sets the "href" for each <a> element listItemHref.setAttribute("href", "#" + section.id); listItem.setAttribute("class", "line_item"); listItem.appendChild(listItemHref); navList.appendChild(listItem); const h2 = section.querySelector('h2'); listItemHref.innerText = h2.innerText; }

 <header class="page_header" id="home"> <h1>Resume</h1> <!--each li is created using JavaScript--> <nav class="nav_menu"> <ul id="nav_list"> </ul> </nav> </header> <main> <section id="education"> <h2>My Education</h2> </section> <section id="my_projects"> <h2>My Projects</h2> </section> <section id="about"> <h2>About Me</h2> </section> <section id="contact"> <h2>Contact Me</h2> </section> </main>

Hope this was helpful!