jQuery動態添加內容到div

Question

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

我想應用我的鏈接，以便用戶在任何地方點擊它轉到鏈接的內容。 希望你能指導我。 謝謝！

Answer 1

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

創建“article”作為元素，然后創建“a”元素。 在將“a”附加到“article”之前，將“h3”元素附加到“a”元素，然后將“article”附加到“#world”。

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

Answer 2

您沒有按照文檔中的描述使用append ——請參閱您可以傳遞的參數類型。

也許你打算這樣做：

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