Создание, вставка и удаление

Если передать в $ не селектор, а HTML-тег, jQuery создаст новый элемент. Пока его не вставили, он существует только в памяти. Вставка, перенос и удаление делаются отдельными методами.

Создание и вставка в конец

<ul id="tasks">
  <li>Купить хлеб</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const $item = $('<li>').text('Позвонить Олегу');
 
  $('#tasks').append($item);
 
  console.log($('#tasks li').length); // 2
</script>

$('<li>') создаёт пустой пункт, text() задаёт текст, append() добавляет пункт в конец списка. На странице два пункта.

Создание с настройками

Вторым аргументом можно передать объект с текстом, классами и атрибутами:

<ul id="tasks"></ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const $item = $('<li>', {
    text: 'Написать отчёт',
    class: 'task',
    'data-id': 3,
  });
 
  $item.append($('<button>', { text: 'Удалить', class: 'delete' }));
  $('#tasks').append($item);
</script>

В списке появился пункт с кнопкой «Удалить» внутри. Ключ text безопасен для пользовательского ввода, как и метод text().

Куда вставлять

Если вставить уже существующий элемент, он переместится, а не скопируется. Копию делает метод clone().

Удаление

<ul id="tasks">
  <li class="done">Купить хлеб</li>
  <li>Позвонить Олегу</li>
</ul>
<p id="note">Подсказка</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('.done').remove();
  $('#note').empty();
 
  console.log($('#tasks li').length); // 1
</script>

remove() убирает элемент со страницы целиком вместе с его обработчиками событий. empty() оставляет сам элемент, но удаляет всё содержимое: абзац остался, но стал пустым.

Список дел из массива

Обычно элементы создаются из данных. В проекте этот код лежит в script.js:

<ul id="tasks"></ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  const tasks = ['Купить хлеб', 'Позвонить Олегу', 'Написать отчёт'];
  const $list = $('#tasks');
 
  for (const title of tasks) {
    $list.append($('<li>').text(title));
  }
</script>

Цикл создаёт по пункту на каждую задачу. На странице список из трёх дел.

То же на обычном JavaScript

$('<li>') соответствует document.createElement('li'), append — методу append(), before/after — одноимённым методам элементов, remove() — element.remove().

Частая ошибка

Собирать разметку из строк: $list.append('<li>' + title + '</li>'). Строка разбирается как HTML, и название с тегами превратится в разметку — та же уязвимость, что и с html(). Создавайте элемент и задавайте текст через text() или ключ text.