如何防止我的 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);
            };
    };

这适用于“article-wrapper”，但在“content-wrapper”中，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 并在循环内附加段落。