将jQuery中的元素包装在div中的每个循环中

Question

我一直在努力将一些数据从XML提要解析为JSON，并且所有这些都工作良好。只是我正在尝试将数据的每个部分包装在div中。

这是我正在处理的主要部分：

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
    $(release).each(function(index, newsItem) {
      var idnum = newsItem.id;
      newsDiv.append($(document.createElement("h2")).text(newsItem.headline));
      newsDiv.append($(document.createElement("p")).text(newsItem.releaseDate));
      newsDiv.append('<a href="https://urltothing.com/'+idnum+'">Read More</a>'); 
    });

将输出：

<h2>Headline</h2>
<p>Date things</p>
<a href="https://urltopage/123">Read More</a>
<h2>Headline2</h2>
<p>Date things2</p>
<a href="https://urltopage/456">Read More</a>
<h2>Headline3</h2>
<p>Date things3</p>
<a href="https://urltopage/789">Read More</a>

依此类推。我想要将所有这些都包装在<div>中，因此看起来像这样：

<div>
<h2>Headline</h2>
<p>Date things</p>
<a href="https://urltopage/123">Read More</a>
</div>
<div>
<h2>Headline2</h2>
<p>Date things2</p>
<a href="https://urltopage/456">Read More</a>
</div>
<div>
<h2>Headline3</h2>
<p>Date things3</p>
<a href="https://urltopage/789">Read More</a>
</div>

我不确定如何有效地做到这一点。另外，如果还有其他方法可以清理我目前拥有的东西，我也将全力以赴。

Answer 1

尝试这样：

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
    $(release).each(function(index, newsItem) {
      var idnum = newsItem.id;
      newsDiv.wrap("<div>");
      newsDiv.append($(document.createElement("h2")).text(newsItem.headline));
      newsDiv.append($(document.createElement("p")).text(newsItem.releaseDate));
      newsDiv.append('<a href="https://urltothing.com/'+idnum+'">Read More</a>'); 
      newsDiv.wrap("</div>");
    });

Answer 2

用$('<div>')创建一个新的空div，然后在其上调用.append，传递3个参数（正在创建的3个元素，并将其附加到newsDiv：]]

var newsDiv = $('<div class="news-feed">').appendTo($("body"));
const release = [{
  headline: 'headline',
  releaseDate: 'releaseDate',
  id: 1
}];
$(release).each(function(index, newsItem) {
  const $div = $('<div>').append(
    $('<h2>').text(newsItem.headline),
    $('<p>').text(newsItem.releaseDate),
    $('<a href="https://urltothing.com/' + newsItem.id + '">Read More</a>')
  );
  newsDiv.append($div);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

看来您正在混合使用jQuery和香草DOM方法，这很奇怪。对于这种琐碎的事情，不需要像jQuery这样的大型库。如果要使用普通的DOM方法，则可以根据需要轻松删除对jQuery的依赖：

var newsDiv = document.body.appendChild(document.createElement('div'));
newsDiv.classList.add('news-feed');
const release = [{
  headline: 'headline',
  releaseDate: 'releaseDate',
  id: 1
}];
for (const { headline, releaseDate, id } of release) {
  const div = newsDiv.appendChild(document.createElement('div'));
  div.innerHTML = '<h2></h2><p></p><a href="https://urltothing.com/' + id + '">Read More</a>';
  const [h2, p] = div.children;
  h2.textContent = headline;
  p.textContent = releaseDate;
}

Answer 3

实现此目标的最佳方法是执行以下操作：

Answer 4

请执行以下操作：

Answer 5

您也可以使用Template literals