JQuery: взять существующий HTML, изменить один узел, а затем повторно внедрить

Question

У меня есть блоб HTML, который я извлекаю с помощью простых селекторов jQuery, что-то вроде следующего:

<div id="stuff">
 <ul> 
   <li>some</li>
   <li class="ninja">stuff</li>
 </ul>
</div>

Я в основном делаю:

var myblock = $("#stuff").html();

Теперь я хочу добавить дополнительный элемент li в конец списка li с очень похожими атрибутами на li над ним, но я хочу изменить класс ninja на class samurai.

Как лучше всего это сделать с помощью jQuery?

Answer 1

Просто выберите <ul> и добавьте <li> к нему

$("#stuff ul").append('<li class="samurai">stuff</li>');

Если вы действительно хотите скопировать последний элемент <li>, измените класс и добавьте в список, тогда вы можете сделать что-то вроде этого

var ul = $("#stuff ul");
ul.append(ul.find('li:last').clone().removeClass().addClass("samurai"));

передать true в clone(), если вы также хотите скопировать обработчики событий.

Проблема с взятием целого куска HTML, изменением элемента и последующей вставкой заключается в том, что любые обработчики событий, настроенные для элементов, которые будут заменены при повторной вставке HTML, будут потеряны, поэтому он будет более элегантным и менее громоздким навязчиво просто манипулировать той частью DOM, которая вам нужна.