jquery - 为什么动态创建的 ul 不呈现任何 HTML？

Question

为什么，无论我使用以下哪一个来创建新<ul>元素，HTML 都是空的：

var complaintsList = $('<ul/>', { id : 'myId' });

或者

var complaintsList = $("<ul id='myId'></ul>");

alert($(complaintsList).html());

当我将<li>元素添加到列表并输出 HTML 时，仅<li>显示元素的 HTML。

有人可以解释我做错了什么吗？

Answer 1

在控制台中：

var complaintsList = $('<ul/>', { id : 'myId' });

complaintsList
[
<ul id=​"myId">​&lt;/ul>​
]

complaintsList.html()
""

complaintsList.append("<li>")
[
<ul id=​"myId">​
<li>​&lt;/li>​
</ul>​
]

complaintsList.html()
"<li></li>"

它按预期工作。的 htmlul是空白的，因为其中没有任何内容。添加 后li，其中有一个列表项。

.html()只为您提供元素内容的 HTML 。因此，当元素中没有任何内容时，HTML 将是一个空字符串。如果需要获取outerHTML元素的，可以使用jQuery outerHTML 插件。

Answer 2

为什么，无论我使用以下哪个创建新元素，HTML 都是空的

因为该html方法返回 jQuery 对象中（第一个）元素内的元素的 HTML 代码。

有人可以解释我做错了什么吗？

您假设该html方法还包括 jQuery 对象中元素的 HTML 代码。

---

旁注：该变量complaintsList已经包含一个 jQuery 对象，因此您不必将其包装在另一个 jQuery 对象中即可在其上使用 jQuery 方法：

alert(complaintsList.html());

Answer 3

http://api.jquery.com/html/说：

“获取匹配元素集中第一个元素的 HTML 内容。”

.html()只返回元素的内部内容，而不是元素本身。

参见innerHTMLvs outerHTML，.html()类似于 .innerHTML属性。