使用数组中的 <h2> 文本填充 <a> 标记

Question

我是 JavaScript 的新手，所以我不确定要搜索哪些关键字才能找到我的具体答案。预先感谢您的帮助。

我需要在 nav 中使用 a href 动态创建 li 标签。这些将滚动到 main.
中的 4 个不同部分我创建了每个 li 和 a href.
我现在需要从每个 h2 中获取文本到每个 li 中的 a 元素我从 h2 元素创建一个数组开始，但现在意识到我可以使用前一个数组中的 outerHTML。
如何获取 h2 文本，或从 sectionIds 数组访问 outerHTML 属性？

//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

您可以通过执行以下操作获取所有 "h2" 元素的文本：

section.querySelector('h2').outerText

此外，您需要将文本添加到每个 "li" 元素，如下所示：

const text = document.createTextNode(section.querySelector('h2').outerText);
listItemHref.appendChild(text);

这是一个可行的解决方案：

//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');
    //creates an <a> element for each section name
    const listItemHref = document.createElement('a');
    const text = document.createTextNode(section.querySelector('h2').outerText);
    listItemHref.appendChild(text);
    //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

如果我没理解错的话，您想从每个 h2 标签复制文本并将其放在锚标签内。您实际上不需要另一个循环来执行此操作。使用您的 HTML 代码，因为每个部分只有一个元素（h2），您可以使用以下方法简单地检索 h2：const h2 = section.firstElementChild.

如果还有其他元素，但每个部分只有一个h2，那么我会推荐使用querySelector函数。这使您可以更轻松地搜索元素。因此，您可以写 document.querySelectorAll('section'); 而不是 Array.from(document.getElementsByTagName('section'));。然后在循环中，您可以使用以下命令搜索 h2：const h2 = section.querySelector('h2');

注意：要在 section 元素上使用 querySelector，还必须使用 querySelector 检索到 section 元素。

//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>

希望对您有所帮助！

使用数组中的 <h2> 文本填充 <a> 标记

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

javascript

arrays

outerhtml

createelement