jQuery动态向div添加内容

时间:2019-11-30 19:31:46

标签: javascript jquery

我想做的是将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>

我想应用我的链接,以便用户到处单击链接的内容。希望你能指导我。谢谢!

2 个答案:

答案 0 :(得分:1)

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

创建“文章”作为元素,然后创建“ a”元素。在将“ a”附加到“ article”之后,再将“ article”附加到“ #world”之前,将“ h3”元素附加到“ a”元素。

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

答案 1 :(得分:1)

您没有按照文档中的说明使用append -请参阅可以传递的参数类型。

也许您打算这样做:

$("#world").append(
    $("<article>").append(
        $("<a>", { href: link }), 
        $("<h3>").text(title)
    )
);