Для динамического добавления и удаления элементов HTML вы можете использовать различные методы, предоставляемые JavaScript. Вот несколько распространенных подходов:

1. createElement и AppendChild: вы можете создать новый элемент HTML с помощью метода createElement, установить его атрибуты и содержимое, а затем добавить его к существующему элементу с помощью appendChildметод.

Пример:

var parentElement = document.getElementById("parent");
var newElement = document.createElement("div");
newElement.innerHTML = "New element";
parentElement.appendChild(newElement);

2. innerHTML: это свойство позволяет вам изменять HTML-содержимое элемента, присваивая ему новый HTML-код. Вы можете добавлять или удалять элементы, манипулируя строкой HTML.

Пример:

var parentElement = document.getElementById("parent");
parentElement.innerHTML += "<div>New element</div>";

3. insertAdjacentHTML: этот метод позволяет вставлять HTML-код в определенную позицию относительно элемента. Вы можете использовать разные значения для параметра position, например «beforebegin», «afterbegin», «beforeend» или «afterend», чтобы определить, куда следует вставить новый HTML-код.

Пример:

var parentElement = document.getElementById("parent");
parentElement.insertAdjacentHTML("beforeend", "<div>New element</div>");

4. removeChild: Если вы хотите удалить существующий элемент, вы можете использовать метод removeChild. Этот метод удаляет указанный дочерний узел из его родительского узла.

Пример:

var parentElement = document.getElementById("parent");
var childElement = document.getElementById("child");
parentElement.removeChild(childElement);

5. remove: это новый метод, доступный на узлах DOM в современных браузерах. Он позволяет удалить элемент напрямую, не обращаясь к его родителю.

Пример:

var element = document.getElementById("element");
element.remove();