JavaScript: как добавить текст в тег с тегом внутри?

Question

[JRazor]

Здраствуйте, уважаемые тостеровцы.

Дизайнер заказчика сделал оформление кода в следующем виде:

<li><i class="fa fa-map-marker"></i> Pierrelatte</li>

Необходимо менять только текст (в примере это "Pierrelatte"). Тег i в данном случае отображает маркер. Мне, как бэкэндщику, нужно с помощью JS отослать текст внутрь тега li, но все осложняется содержащимся внутри тегом. Как решить этот вопрос?

В голову приходят следующие варианты:
1) Угробить код еще больше, запихав внутрь еще один тег.
2) Передавать внутренний тег прямо в JS (убожество, да и только).
3) Предъявить дизайнеру за его методы решения задачи.

Всем спасибо за ответы.

Answer 1

[Виталий Инчин ☢]

Можно получить Текстовый узел внутри li и изменять его содержимое. Вот так.

Comments

[JRazor]

Спасибо за ответ. Использовать необходимо многократно. Да, Ваши варианты мне приходили в голову, но у них слегка топорное решение. Вот только бесполезные теги внутри тегов - как по мне, не самое изящное решение.

[Виталий Инчин ☢]

JRazor: обновил. Как вам вариант с текстовым узлом?

[JRazor]

Виталий Инчин ☢: Попробовал, почему-то не сработало (я ведь все верно делаю?):

$('li#age i').insertAdjacentHTML(afterEnd, "Text");

[JRazor]

Не посмотрел измененную ссылку. Спасибо за совет, отличная реализация. Продано!

[Виталий Инчин ☢]

JRazor: так, для саморазвития (: - insertAdjacent* не jQuery метод. И незачем писать "li#age", ведь id он и так один и можно просто обратится к "#age".

[JRazor]

Виталий Инчин ☢: Кстати, действительно, про id. Привычка питоновская - все структурировать и писать красиво. Спасибо на добром слове :)

Answer 2

[Alexander]

jsfiddle.net/99ehzh5o/1

Comments

[JRazor]

Спасибо за ответ. Посмотрел, там идет накопление при повторном использовании (как в append).

[Alexander]

JRazor: Может взять этот текст Pierrelatte обернуть в какойнить спан .

[Alexander]

JRazor:
Тогда сперва очищаем её а потом добавляем текст.
$('li').find('i').after('');
$('li').find('i').after('text');