从api获取数据作为json，但是html嵌套是关闭的

Question

在循环浏览一些JSON数据时，我正在尝试在<a>标记中嵌套<li>标记，但它不是：

var ul = $('<ul/>');
$.each(data.headlines, function() {
var linkFromJson = "<a>" + this.headline + "</a>";
linkFromJson = $(linkFromJson).attr("href", this.links.web.href).attr("target", "_blank");
var listItem = document.createElement('li');
ul.append(listItem, linkFromJson);
});
// append this list to the document body
$('body').append(ul);

我得到的是<li></li>，后面跟着<a>标记，但它会正确显示超链接。当我编写代码以嵌套json时，它会在循环遍历每个[object][Object]标记的项目后返回<li>。

我做错了什么？

谢谢！

编辑：我想出来了，使用.html在<li>内插入构建的链接，然后将<li>附加到<ul>：

var ul = $('<ul/>');
$.each(data.headlines, function() {
var linkFromJson = "<a>" + this.headline + "</a>";
linkFromJson = $(linkFromJson).attr("href", this.links.web.href).attr("target", "_blank");
var listItem = $('<li/>');
$(listItem).html(linkFromJson);
ul.append(listItem);
});
// append this list to the document body
$('body').append(ul);
},
error: function() {
// handle the error
}

Answer 1

根据.append()，ul.append(listItem, linkFromJson)会将所有内容依次插入ul元素的末尾。它不会将给定内容嵌套在彼此中。

要实现这一点，您必须先将<a>追加到<li>，然后将生成的<li>追加到<ul>

var listItem = document.createElement('li');
listItem.append(linkFromJson);
ul.append(listItem);