Добавить html тег в конце каждого li в списке

Question

Как добавить <span></span> внутри каждого <li> после основного контента при помощи чистого javascript? Пробовала и getElementsByTagName, и querySelectorAll, и getElementsByClassName, и getElementById, но ничего не получилось.

<div class="g_b1_paragraph_text">
<ul>
<li>Компактный, лёгкий, ударопрочный</li>
<li>Запас энергии: <strong>5000 измерений</strong></li>
<li>Время измерения: <strong>9 сек</strong></li>
<li>Большой дисплей, крупный шрифт</li>
<li>Одна большая <strong>удобная кнопка</strong></li>
<li>Термометр для измерения температуры помещения</li>
<li><strong>Память на 365 измерений</strong></li>
<li>Таймер для напоминаний, подключение к ПК</li>
</ul>
</div>

Answer 1

Не знаю, как там с чистым js-ом, а на jQuery - одной строчкой:

$('li').append('<span></span>');

Answer 2

На чистом js тоже можно одной строчкой обойтись. Другой вопрос, зачем там span нужен? Может проще сделать псевдоэлементом на css?

document.querySelectorAll('li').forEach(el => {el.innerHTML += '<span></span>'});

li span{
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: red;
  vertical-align: middle;
  margin-left: .5em;
}

<ul>
  <li>Компактный, лёгкий, ударопрочный</li>
  <li>Запас энергии: <strong>5000 измерений</strong></li>
  <li>Время измерения: <strong>9 сек</strong></li>
  <li>Большой дисплей, крупный шрифт</li>
  <li>Одна большая <strong>удобная кнопка</strong></li>
  <li>Термометр для измерения температуры помещения</li>
  <li><strong>Память на 365 измерений</strong></li>
  <li>Таймер для напоминаний, подключение к ПК</li>
</ul>

Answer 3

Если я вас правильно понял вам нужно именно это:

let liElems = document.querySelectorAll('ul li');///Или ваш селектор внутри скобок
liElems.forEach((el)=>{
  let newSpan = document.createElement('span');
  newSpan.innerHTML = 'Ваш текст';
  el.append(newSpan);
});

Как работает:

Получаем все элементы li в вашем HTML

let liElems = document.querySelectorAll('ul li');

С помощью NodeList.forEach() перебираем все эти элементы с определённой функцией которой мы передаём эти элементы по очереди.

(el)=>
{

}

Это безымянная функция вместо этого мы можем написать

function(el){

}

Внутрь функции мы кладём следующий код который будет выполнен для каждого li

Далее создаём элемент внутри скрипта

let newSpan = document.createElement('span');

Вписываем в этот элемент (который мы создали внутри нашего скрипта)текст

newSpan.innerHTML = 'Ваш текст';

И далее когда наш новый элемент готов к выводу на страницу подгружаем его

el.append(newSpan); ///если хотите вставить этот элемент в начало li то вам нужно будет использовать функцию Element.prepend() вместо Element.append()

БЛОГ НА HUSL

Добавить html тег в конце каждого li в списке

Ответы (3 шт):