时间戳

首页 > 解决方案 > jQuery动态添加内容到div

javascript - jQuery动态添加内容到div

问题描述

我想要做的是将 xml 文件中的每个项目的内容添加到 html 页面。我正在努力使每个项目内容都在<article>标签内。然而，这是我第一次使用 jQuery，我的最终结果不是我想要的。

let $items = $(xmlContent).find("item");

$items.each(function() {
  let title = $(this).find('title').text();
  let date = $(this).find('pubDate').text();
  let link = $(this).find('link').text();
  let guid = $(this).find('guid').text();
  let photo = $(this).find('media').html();
  $("#world").append("<article></article>", [$("<a>", {
    href: link
  }) + ("<h3>" + title + "</h3>")]);

这是目前的最终结果：

<article></article>
[object Object]
<h3>Students Fainting From Hunger in Venezuela’s Failing School System</h3>

我希望它变成：

<article> <a href= myLink <h3>Students Fainting From Hunger in Venezuela’s Failing School System</h3> </a> </article>

我想应用我的链接，以便用户在任何地方点击它转到链接的内容。希望你能指导我。谢谢！

标签： javascriptjquery

解决方案

您可以逐步构建您的文章元素。

创建“文章”作为元素，然后创建“a”元素。将“h3”元素附加到“a”元素，然后将“a”附加到“article”，然后将“article”附加到“#world”。

let article = $("<article></article>")
let a = $("<a></a>", {href: link})
a.append("<h3>" + title + "</h3>")
article.append(a)
$("#world").append(article)

推荐阅读