如何防止DIV元素环绕每个P元素？

Question

I'm pulling some strings out of a couple of arrays of objects and trying to layer them in div elements. Here is my code:

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);
            };
    };

This works fine for "article-wrapper", but in "content-wrapper", the div wraps around each individual paragraph element instead of wrapping around all three, like so:

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

I've tinkered around and I'm not quite sure what's wrong.

Answer 1

You are creating multiple divs. You need to create content-wrapper outside for and append paragraphs inside the loop.