Добавление элементов с помощью JQuery удаляет предыдущие элементы

Question

У меня есть ul который добавляется несколько liпосле запроса AJAX. Предыдущие элементы в списке удаляются, почему это?

Функция вызова AJAX:

var $comments = $('.comments').find('ul');

$comments.text('Loading...');

    $.ajax({
        type: 'get',
        url: 'http://localhost/codeigniter/',
        success: function(result){

            if (result == 0){
                $comments.text('No comments.');

                return;
            }                           

            $comments.text('');

            display_comments(result);
        }
    });

Функция отображения списка:

function display_comments(result){
var result_comments = JSON.parse(result);   

var $ul = $('.comments').find('ul');

for (var i = 0; i < comments.length; i++){

        // Insert comments
        lis += '\
            <li>\
                ' + comments[i].title + '\                  
                <p>' + comments[i].description +'\
            </li>';
    }

$ul.append(lis);
}

Answer 1

Из-за этого

$comments.text('Loading...');

и это

$comments.text('No comments.');

и это

$comments.text('');

Причина в том, что JQuery .text() Метод перезаписывает содержимое сопоставленного элемента. В случае ul его содержимое - любой ребенок lis. Поэтому, когда вы начинаете загружать элементы списка ваш ul будет выглядеть так: <ul>Loading...</ul>