使用陣列中的<h2>文本填充<a>標記

我是 JavaScript 新手，所以我不確定要搜索哪些關鍵字才能找到我的具體答案。在此先感謝您的幫助。

我需要li在a href. nav這些將滾動到 4 個不同的部分main。
我已經創建了每個li和a href.
我現在需要通過從元素 創建一個陣列來h2從每個a元素中獲取文本，但現在我意識到我可以使用前一個陣列中的 outerHTML。 如何獲取文本，或從 sectionIds 陣列訪問 outerHTML 屬性？lih2
h2

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

uj5u.com熱心網友回復：

如果我理解正確，您希望從每個 h2 標簽中復制文本并將其放在錨標簽內。您實際上不需要另一個回圈來執行此操作。使用您的 HTML 代碼，由于每個部分只有一個元素（h2），您可以使用以下方法簡單地檢索 h2 const h2 = section.firstElementChild：。

如果每個部分中還有其他元素但只有一個 h2，那么我建議使用 querySelector 函式。這使您可以更輕松地搜索元素。所以代替Array.from(document.getElementsByTagName('section'));, 你可以寫document.querySelectorAll('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>

希望這有幫助！

uj5u.com熱心網友回復：

您可以通過執行以下操作獲取所有“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>

標籤：

上一篇：在javascript中將多維陣列轉換為字串？

下一篇：如何使用建構式C 初始化陣列類