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"></ul>
]

complaintsList.html()
""

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

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

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

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

Answer 2

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

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

.html()仅返回元素的内部内容，但不返回元素本身。

请参阅innerHTML vs outerHTML，.html()类似于.innerHTML属性。

Answer 3

为什么这样，我用以下任何一个来创建一个新的元素，HTML为空

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

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

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

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

alert(complaintsList.html());

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

3 个答案: