Создание и вставка DOM-элементов в JavaScript

Не все элементы страницы известны заранее. Например, новый пункт списка появляется после действия пользователя. JavaScript может создать элемент, настроить его и добавить в нужное место DOM-дерева.

• Создание элемента
• append() и prepend()
• before() и after()
• Один элемент - одна позиция
• Итого

Создание элемента

Метод document.createElement() создаёт новый DOM-элемент. Укажите имя HTML-тега без угловых скобок. Сразу после создания элемент существует только в JavaScript - на странице его ещё нет.

<ul class="shopping-list">
  <li>Хлеб</li>
</ul>

const shoppingList = document.querySelector('.shopping-list');
const item = document.createElement('li');

item.textContent = 'Молоко';

shoppingList.append(item);

Сначала был создан элемент li, затем в него добавлен текст. После append() новый пункт появится в конце списка.

append() и prepend()

Метод append() вставляет элемент в конец родителя. Если новый элемент должен быть первым, используйте prepend().

const shoppingList = document.querySelector('.shopping-list');
const firstItem = document.createElement('li');

firstItem.textContent = 'Яблоки';

shoppingList.prepend(firstItem);

В этом примере «Яблоки» появятся перед остальными пунктами. Выбирайте append() или prepend() по позиции нового элемента в контейнере.

Строка, переданная в append(), добавляется как текст, а не как HTML-разметка. Чтобы создать тег, используйте document.createElement(), а затем вставьте полученный элемент.

before() и after()

Методы before() и after() вставляют новый элемент рядом с уже найденным элементом.

<h2 class="tasks-title">Задачи</h2>

const tasksTitle = document.querySelector('.tasks-title');
const hint = document.createElement('p');

hint.textContent = 'Добавьте новую задачу в список.';

tasksTitle.after(hint);

Подсказка будет добавлена после заголовка. Чтобы вставить её перед заголовком, используйте tasksTitle.before(hint).

Один элемент - одна позиция

Один DOM-элемент не может одновременно находиться в двух местах. Повторная вставка того же объекта не создаёт копию, а перемещает его.

const shoppingList = document.querySelector('.shopping-list');
const item = document.createElement('li');

item.textContent = 'Молоко';

shoppingList.append(item);
shoppingList.prepend(item);

После этого item окажется в начале списка, а не появится два раза. Если нужны два одинаковых пункта, создайте каждый через отдельный вызов document.createElement().

Итого

document.createElement() создаёт DOM-элемент, а append() вставляет его в конец родителя. Для начала контейнера используйте prepend(), а для позиции рядом с элементом - before() и after(). Сначала настройте новый элемент, например через textContent, затем вставьте его в DOM.