Динамический HTML список c использованием jQuery библиотеки

Допустим есть у вас html список (или таблица) с несколькими элементами , например:

<ul id="list_cheloveg">

<li id="174">
    <a class="link_cheloveg" href="read.html?id=174">Andrej Vanjiradjan1</a>
    <a class="dialog_edit" href="edit.html?id=174">Edit</a>
    <a class="delete" href="delete.html?id=174">Del</a>
</li>

<li id="175">
    <a class="link_cheloveg" href="read.html?id=175">Andrej Vanjiradjan2</a>
    <a class="dialog_edit" href="edit.html?id=175">Edit</a>
    <a class="delete" href="delete.html?id=175">Del</a>
</li>

<li id="176">
    <a class="link_cheloveg" href="read.html?id=176">Andrej Vanjiradjan3</a>
    <a class="dialog_edit" href="edit.html?id=176">Edit</a>
    <a class="delete" href="delete.html?id=176">Del</a>
</li>
</ul>


И вам надо добавить в конец ещё один элемент , либо отредактировать какой то из существующих. Найболее часто такая задача встречается при отправке запросов через Ajax, и ответ как раз и должен обновить таблицу.

Из 10 статей найденых в гугл, 9 предлагают использувать функцию getElementById, и с помощью неё установить HTML код конкретного элемента, например:

document.getElementById("176").innerHTML = '<li id=177> <a class . и т.д. копи пастим весь html c новыми атрибутоами.. </a></li>';

способ достаточно простой, но очень не красивый, тем более если это не список, а таблица в которой больше 10 столбиков.
Библиотека jQuery, позволяет эту задачу выполнить гораздо элегантней.

Шаг 1. скачиваем библиотеку и подключаем к странице:

<script type="text/javascript" src="jquery.js"></script>

Шаг 2.пишем javascript функцию, которая будет получать новые аттрибуты, обрабатывать их и обновлять таблицу.
Например, в моём случае список - это люди: уникальный id, имя и фамилия:

<script type="text/javascript">
function updateList(id,firstName,lastName) {
    var oldId   = $('#list_cheloveg li').attr('id');
    var oldText = $('#list_cheloveg li:last .link_cheloveg').text();
    var oldHtml = $('#list_cheloveg li:last').html();
    for (i=0;i<3;i++) { // id used 3 times in row    
        oldHtml = oldHtml.replace(''+oldId,''+id);
    }
    oldHtml = oldHtml.replace(oldText,firstName + ' ' + lastName);
    var newHtml = '<li id=' + id + '>' + oldHtml + '</li>';    
     if ( document.getElementById(id) == null ) {         
        $('#list_cheloveg').append(newHtml);
    } else {
        document.getElementById(id).innerHTML=newHtml;
    }
}
</script>

Что же делает эта функция? Она выбирает последнюю строку(последниц элемент списка) из таблицы,
создаёт 3 переменных, в которых сохраняет уникальный id, имя+фамилию , и старый html код который мы будем редактировать.
Панализировав список, можно увидеть, что нам надо заменить 3 раза уникальный id и один раз имя+фамилия. Это мы и сделали с помощью стандартной функции replace. Далле мы проверяем весь документ и исчем запись с новым id , если не находим, значит добавляем элемент в конец списка, как новую строку, если находим значит заменяем его.

Протестировать єтот пример можно с помощью двух ссылок:

<a href=# onclick="updateList(194,'textA','textB');">add</a>
<a href=# onclick="updateList(174,'textAA','textBB');">update</a>

P.s. Если скопируете весь html код из этого сообщения в один файл , и сохраните его в какую то  папку, и в эту же папку добавите jQuery библиотеку jquery.js , то сможете успешно протестировать то что я описал в посте.