jQuery load page on end of list

Question

I have a list of items

<ul class="coments-list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

i would like to load with jquery more items, after ajax success

...
success: function (id) {
   $('.comment-list').load('/coments?commentid=' + id);
},
...

It is not the problem in any code before this, but this code replaces the whole list with loaded <li> element

Answer 1

Try the JQuery append function. For example:

$('.coments-list').append('<li>4</li>');

Fiddle.

To combine load and append you can do it like this:

...
success: function (id) {
    $('.coments-list').append($(document.createElement("li")).load('/coments?commentid=' + id));
},
...

It appends the <li> element to the coments-list and loads it with data from source passed as parameter.