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

Создание​

document.createElement(tagName);

Создает элемент с именем tagName и возвращает ссылку на него как результат своего выполнения. tagName - это строка, указывающая тип создаваемого элемента. Элемент создается в памяти, в DOM его еще нет.

const heading = document.createElement("h1");
console.log(heading); // <h1></h1>

heading.textContent = "This is a heading";
console.log(heading); // <h1>This is a heading</h1>

const image = document.createElement("img");
image.src = "https://placeimg.com/640/480/nature";
image.alt = "Nature";
console.log(image); // <img src="https://placeimg.com/640/480/nature" alt="Nature" />

Добавление​

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

• element.append(el1, el2, ...) - добавляет один или несколько элементов после всех детей элемента element.

• element.prepend(el1, el2, ...) - добавляет один или несколько элементов перед всеми детьми элемента element.

• element.after(el1, el2, ...) - добавляет один или несколько элементов после элемента element.

• element.before(el1, el2, ...) - добавляет один или несколько элементов перед элементом element.

Во всех этих методах, el это элементы или строки, в любом сочетании и количестве. Строки добавляются как текстовые узлы.

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

Удаление​

elem.remove();

Для того, чтобы удалить элемент используется метод remove(). Он вызывается на самом элементе elem, который необходимо удалить