如何防止我的DIV元素纏繞每個P元素？

Question

我從幾個對象數組中拉出一些字符串，並試圖在div元素中對它們進行分層。這裏是我的代碼：

function renderBlogs() { 
    for (i = 0; i < blogArticles.length; i++) { 
     var currentArticle = blogArticles[i]; 

     var divArticleWrapper = document.createElement("div"); 
     divArticleWrapper.className = "article-wrapper"; 

     var articleTitle = document.createElement("h1"); 
     articleTitle.innerHTML = currentArticle.title; 

     var articleAuthor = document.createElement("h4"); 
     articleAuthor.innerHTML = currentArticle.author; 

     var articlePublishedOn = document.createElement("h4"); 
     articlePublishedOn.innerHTML = currentArticle.publishedOn; 

     var articleURL = document.createElement("a"); 
     var articleText = document.createTextNode(currentArticle.url); 
     articleURL.appendChild(articleText); 
     articleURL.href = currentArticle.url; 

     divArticleWrapper.appendChild(articleTitle); 
     divArticleWrapper.appendChild(articleAuthor); 
     divArticleWrapper.appendChild(articlePublishedOn); 
     divArticleWrapper.appendChild(articleURL) 
     document.getElementById("blog-container").appendChild(divArticleWrapper); 

      for (j = 0; j < currentArticle.content.length; j++) { 
       var currentContent = currentArticle.content[j]; 

       var divContentWrapper = document.createElement("div"); 
       divContentWrapper.className = "content-wrapper"; 

       var contentHeading = document.createElement("h2"); 
       contentHeading.innerHTML = currentContent.heading; 

       var contentParagraph = document.createElement("p"); 
       contentParagraph.innerHTML = currentContent.paragraph; 

       divContentWrapper.appendChild(contentHeading); 
       divContentWrapper.appendChild(contentParagraph); 
       divArticleWrapper.appendChild(divContentWrapper); 
      }; 
    }; 

這工作正常「的文章 - 包裝」，但在「內容包裝」，在div環繞每個單獨段落元素，而不是周圍包裹三個，像這樣：

<div class="content-wrapper"> 
    <h2>Slow</h2> 

    <p>Is changing the DOM slow? What about loading a &lt;script&gt; in the 
    &lt;head&gt;? JavaScript animations are slower than CSS ones, right? 
    Also, does a 20-millisecond operation take too long? What about 0.5 
    seconds? 10 seconds?</p> 
</div> 

<div class="content-wrapper"> 
    <p>While it’s true that different operations take different amounts of 
    time to complete, it’s hard to say objectively whether something is slow 
    or fast without the context of when it’s happening. For example, code 
    running during idle time, in a touch handler or in the hot path of a game 
    loop each has different performance requirements. Put another way, the 
    people using your website or app have different performance expectations 
    for each of those contexts. Like every aspect of UX, we build for our 
    users, and what they perceive is what matters most. In fact, number one 
    on Google’s ten things we know to be true is 「Focus on the user and all 
    else will follow.」</p> 
</div> 

<div class="content-wrapper"> 
    <p>Asking 「What does slow mean?,」 then, is really the wrong question. 
    Instead, we need to ask 「What does the user feel when they’re interacting 
    with the things we build?」</p> 
</div> 

我已經修好了，我不太清楚什麼是錯的。

Answer 1

您正在創建多個div。您需要在for之外創建content-wrapper並在循環中追加段落。