jquery 追加不适用于关系选择器

Question

append() 方法似乎只适用于像 $("#myid") 这样的简单选择器，而不适用于像 $(#myid>ul) 这样的关系选择器。你有同样的问题吗？

示例试试这个： http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_append_ref

如果我这样更改代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
    });
    $("#btn2").click(function(){
        $("p>ol").append("<li>Appended item</li>");
    });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.
 <ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</p>
<button id="btn1">Append text</button>
</body>
</html>

"Append list item" 按钮不再起作用，因为 $("p>ol").append("<li>Appended item</li>") 不起作用，因为它有一个关系选择器。

Answer 1

jQuery 工作正常。是你的标记搞砸了。在段落元素中包含像 ol 这样的流元素是违反 HTML 规范的。 p 元素

中只允许使用短语元素

段落只能包含措辞内容：w3c spec
短语内容不包括 ol 元素：w3c again

请注意以下示例中 $('p + ol') 选择器如何正确定位 ol。这是因为 HTML 规范中 p 元素的一个鲜为人知的规则。 Paragraphs automatically terminate without the need of an ending paragraph tag if they are followed by ol or other flow content. (See "Tag Omission")

$('p + ol').css({color: 'red'});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  WARNING! this is invalid markup.
  <ol>
    <li>List</li>
    <li>List</li>
    <li>List</li>
  </ol>
</p>

jquery 追加不适用于关系选择器

jquery append doesn't work with relational selectors

jquery

relational

append

jquery-selectors