jQuery last-child和insetBefore不起作用

Question

My code:

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

The above does not work. This erases the last <li> element.

I wish it add another <li> after the last <li>

Here's a complete example https://jsfiddle.net/4q0eLkd1/13/

Answer 1

If you need to add new item after the last one last you should use $.fn.append :

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

This is the simplest and fastest solution. Behind the scene it will use native Node.appendChild method.

Here is a simple demonstration.

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

Answer 2

See this

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