jQuery last-child和insetBefore不起作用

Question

我的代码：

$('#discussion li:last-child').insertBefore('<li class="other">ciao</li>');

以上不起作用。这会删除最后一个<li>元素。

我希望在最后<li>

之后添加另一个<li>

这是一个完整的例子    dot notation

Answer 1

如果您需要在最后一项之后添加新项目，则应使用$.fn.append：

$('#discussion').append('<li class="other">ciao</li>');

这是最简单，最快速的解决方案。在场景后面，它将使用原生的Node.appendChild方法。

这是一个简单的演示。

＆＃13;

＆＃13;

$(document).on('click', '#bott', function() {
  $('#discussion').append('<li class="other">New last item</li>');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="discussion">
  <li>Item one</li>
</ol>
<button id="bott">click</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

见这个

＆＃13;

＆＃13;

$(document).on("click","#bott",function(){
    $('<li class="other">ciao</li>').insertAfter("#discussion li:last-child");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ol id="discussion">
    <li class="self">ciao</li>
</ol>
<button id="bott">click</button>

＆＃13;

＆＃13;

＆＃13;