将 html 中的文本附加到不同的部分

Question

我试图遍历此 html 并获取 h4 headers 和每个部分的第一句，然后将其附加到 div.

function sumary () {
let headings = document.getElementsByTagName("h4"); // Get H4s
let newsText = document.getElementsByClassName("newsarticle").firstChild; // gets first "P" from 
each "class="Newsarticle"
let menu = document.createElement("div");          // Create DIV
let menuUList = document.createElement("ul");     // Create UL
menu.appendChild(menuUList);                      // Append UL to DIV
for (let i = 0; i < headings.length; i++) {
    let menuUListItem = document.createElement("li"); // Create an LI for each H4 text
    menuUList.appendChild(menuUListItem); // Append the LI to the UL
    let menuUListItemLink = document.createElement("a"); // Create a A for each LI
    menuUListItem.appendChild(menuUListItemLink); // Append the A to the LI
    let linkText = headings[i].childNodes[0].nodeValue; // Find the text content of each H4
    let menuText = document.createTextNode(linkText); // Create a text node out of each H4 text
    menuUListItemLink.appendChild(menuText); // Append the text node to the A element
    document.body.insertBefore(menu, document.body.firstChild); //Insert into HTML
}

window.onload = makeNavMenu;

这是 html，我可以显示 h4，但它们不显示在 id= Headlines 下的 h2 标题下。

<body>
<div id="wrappermain">
<h1>........</h1>

    <section id="headlines">
        <h2>.....</h2>  
    </section>

    <section id="news">
        <h3>......</h3>
        <article class="newsarticle">
            <h4>........</h4>
            <p>........</p>
            <p></p>
        </article>
        <article class="newsarticle">
            <h4>.......</h4>
            <p>.....</p>
        </article>
        <article class="newsarticle">
            <h4>.....</h4>
            <p>.......</p>  
        </article>
        <article class="newsarticle">
            <h4>....</h4>
            <p>.......</p>  
            <p>.......</p>  
        </article>
    </section>
</div>

Answer 1

您只需在循环的每次迭代中将菜单附加到正文中：

document.body.insertBefore(menu, document.body.firstChild); //Insert into HTML

这表示 menu 应该在正文中的 firstChild 之前添加。因为它在 for 循环内，所以它会为文档中的每个 h4 元素添加。所以把它移到循环之外。

您应该 select 您的目的地并在那里添加菜单。喜欢下面

const target = document.querySelector('#headlines'); // Select <section id="headlines">.
target.insertAdjecentElement('beforeend', menu); // Adds menu to the end in headlines.

将 html 中的文本附加到不同的部分

Append text from html into different section

html

javascript

dom

append

appendchild