JQuery последний ребенок и insetBefore не работает

Question

Мой код:

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

выше не работает. Это стирает последний элемент <li>.

Я хочу это добавить еще <li> после последнего <li>

Вот полный пример https://jsfiddle.net/4q0eLkd1/13/

Answer 1

Смотреть это

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

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

Answer 2

Если вам нужно добавить новый элемент после последнего последний следует использовать $.fn.append:

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

Это самое простое и быстрое решение. За сценой он будет использовать собственный метод Node.appendChild.

Простая демонстрация.

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

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