Вставка HTML как последнего дочернего элемента выбранного тега с использованием JQuery

Question

Я новичок в JQuery. Я читаю JQuery в действии, но только до страницы 39 и нуждаюсь в быстрой помощи!

Обратите внимание: я упрощаю свое фактическое требование, поэтому то, что я прошу, может показаться странным, но я просто пытаюсь понять суть выражения JQuery, а не мою ситуацию (связанную с плагином анимации) .

У меня есть мой HTML-код (который генерируется, и я не хочу его менять):

<div class="favorite">
   <div>
          <a href='http://www.stackoverflow.com'>Stackoverflow</a>
   </div>
</div>

Теперь, что я хочу сделать, это вставить текст «(избранное)» ВНУТРИ тега A после текущего содержимого. Или другими словами, как последний ребенок <a>.

<div class="favorite">
   <div>
          <a href='http://www.stackoverflow.com'>Stackoverflow (favorite)</a>
   </div>
</div>

Лучшее, что у меня есть, это:

$('<span> (favorite)</span>').insertAfter('.favorite div a');

Конечно, это приводит к тому, что (любимый) текст выходит за пределы ссылки А, и он не будет подчеркнут (что я хочу).

Мне нужно как-то сказать .parent (). LastChild (), но я не совсем уверен, как это сделать.

Примечание: я должен был вставить <span>, потому что в противном случае он не видел его как «вставляемый» текст. Я уверен, что есть способ обойти это, но это второстепенная проблема.

Answer 1

Метод append вставляет узлы в конце элементов соответствия. Prepend вставляет узлы в начале.

Пример:

$('div.favorite div a').append('<span> (favorite)</span>');

Элемент span не нужен - вы можете просто сделать это:

$('div.favorite div a').append(' (favorite)');

Answer 2

Вы также можете сделать:

$("div.favorite div a").text($("div.favorite div a").text() + " (favorite)");