Добавление и удаление элемента в JavaScript

Создадим страницу и наполним её содержимым. Далее мы будем добавлять на неё новые элементы. Страница будет такая:

<div style="border: 1px solid red">
  <p>Этот абзац уже есть на странице</p>
</div>

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

Прежде чем добавить новый элемент на страницу, его нужно сначала создать. Метод createElement() создаёт элемент.

document.createElement (тэг)

Созданный элемент сразу присваивается переменной, через которую осуществляется дальнейшая работа с элементом. После того, как элемент создан ему можно установить id, класс, другие атрибуты и задать стиль. О том, как это делается, будет рассказано в следующих темах. Также его можно наполнить содержимимым. Эти действия лучше сделать до добавления элемента на страницу, чтобы он сразу отобразился в том виде, в котором должен быть. Но можно это сделать и после добавления, большой разницы нет.

Для примера создадим абзац с текстом:

let newElem = document.createElement('p');
newElem.innerHTML = 'Новый абзац';

Пока новый элемент не отображается, ведь он ещё не добавлен на страницу.

Добавление элемента

Чтобы добавить созданный элемент на страницу, нужен существующий элемент, который уже есть на странице. Добавление произодится через методы этого элемента. Есть такие методы:

• существующий.append(новый) - добавляет новый элемент в конец существующего.
• существующий.prepend(новый) - добавляет новый элемент в начало существующего.
• существующий.before(новый) - добавляет новый элемент перед существующим.
• существующий.after(новый) - добавляет новый элемент после существующего.
• существующий.replaceWidth(новый) - заменяет существующий элемент новым.

Добавим созданный элемент в блок, который есть на странице:

let block = document.querySelector('div');
block.append(newElem);

Попробуйте использовать другие методы добавления. Посмотрите, где будет появляться новый элемент.

Любой из этих методов может добавлять на страницу не только элемент, но и другой узел или просто текст:

newElem.after('Добавленный текст');

Можно сразу добавить несколько элементов и других узлов. Для этого их нужно перечислить через запятую.

Рассмотренные методы могут быть использованы не только для добавления элемента, но и для перемещения. Любому элементу на странице можно указать новое место и он будет туда перемещён.

Удаление элемента

В JavaScript удаление элемента со страницы осуществляется при помощи метода remove(). Элемент удаляется вместе со всем содержимым.

элемент.remove()

Также этот метод позволяет удалить другой узел.

Удалим из блока первый абзац:

let pre = newElem.previousElementSibling;
pre.remove();