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>

＆＃34;追加列表项＆＃34;按钮不再起作用，因为$("p>ol").append("<li>Appended item</li>")不起作用，因为它有一个关系选择器。

Answer 1

jQuery工作得很好。这是你的标记搞砸了。它违反HTML规范，在段落元素中包含ol等流元素。 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")

＆＃13;

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

＆＃13;

<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>

＆＃13;

jquery append不适用于关系选择器

1 个答案: