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。您需要在content-wrapper之外创建for并在循环内添加段落。

如何防止我的DIV元素缠绕在每个P元素周围？

1 个答案: