Создание, добавление и удаление элементов веб-станицы

Для создания элементов объект document имеет следующие методы:

• createElement(elementName): создает элемент html, тег которого передается в качестве параметра. Возвращает созданный элемент
• createTextNode(text): создает и возвращает текстовый узел. В качестве параметра передается текст узла.

var elem = document.createElement("div");
var elemText = document.createTextNode("Привет мир");

Таким образом, переменная elem будет хранить ссылку на элемент div. Однако одного создания элементов недостаточно, их еще надо добавить на веб-страницу.

Для добавления элементов мы можем использовать один из методов объекта Node:

• appendChild(newNode): добавляет новый узел newNode в конец коллекции дочерних узлов
• insertBefore(newNode, referenceNode): добавляет новый узел newNode перед узлом referenceNode

Используем метод appendChild:

Сначала создаем обычный элемент заголовка h2 и текстовый узел. Затем текстовый узел добавляем в элемент заголовка. Затем заголовок добавляем в один из элементов веб-страницы:

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

Однако нам необязательно для определения текста внутри элемента создавать дополнительный текстовый узел, так как мы можем воспользоваться свойством textContent и напрямую ему присвоить текст:

var elem = document.createElement("h2");
elem.textContent = "Привет мир";

В этом случае текстовый узел будет создан неявно при установке текста.

Теперь рассмотрим, как аналогичный элемент добавить в начало коллекции дочерних узлов блока div:

var articleDiv = document.querySelector("div.article");
// создаем элемент
var elem = document.createElement("h2");
// создаем для него текст
var elemText = document.createTextNode("Привет мир");
// добавляем текст в элемент в качестве дочернего элемента
elem.appendChild(elemText);
// получаем первый элемент, перед которым будет идти добавление
var firstElem = articleDiv.firstChild.nextSibling;
// добавляем элемент в блок div перед первым узлом
articleDiv.insertBefore(elem, firstElem);

Если нам надо вставить новый узел на второе, третье или любое другое место, то нам надо найти узел, перед которым надо вставлять, с помощью комбинаций свойств firstChild/lastChild и nextSibling/previousSibling.

Копирование элемента

Иногда элементы бывают довольно сложными по составу, и гораздо проще их скопировать, чем с помощью отдельных вызовов создавать из содержимое. Для копирования уже имеющихся узлов у объекта Node можно использовать метод cloneNode():

var articleDiv = document.querySelector("div.article");
// клонируем элемент articleDiv
var newArticleDiv = articleDiv.cloneNode(true);
// добавляем в конец элемента body
document.body.appendChild(newArticleDiv);

В метод cloneNode() в качестве параметра передается логическое значение: если передается true, то элемент будет копироваться со всеми дочерними узлами; если передается false - то копируется без дочерних узлов. То есть в данном случае мы копируем узел со всем его содержимым и потом добавляем в конец элемента body.

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

Для удаления элемента вызывается метод removeChild() объекта Node. Этот метод удаляет один из дочерних узлов:

var articleDiv = document.querySelector("div.article");
// находим узел, который будем удалять - первый параграф
var removableNode = document.querySelectorAll("div.article p")[0];
// удаляем узел
articleDiv.removeChild(removableNode);

В данном случае удаляется первый параграф из блока div

Замена элемента

Для замены элемента применяется метод replaceChild(newNode, oldNode) объекта Node. Этот метод в качестве первого параметра принимает новый элемент, который заменяет старый элемент oldNode, передаваемый в качестве второго параметра.

var articleDiv = document.querySelector("div.article");
// находим узел, который будем заменять - первый параграф
var oldNode = document.querySelectorAll("div.article p")[0];
// создаем элемент
var newNode = document.createElement("h2");
// создаем для него текст
var elemText = document.createTextNode("Привет мир");
// добавляем текст в элемент в качестве дочернего элемента
newNode.appendChild(elemText);
// заменяем старый узел новым
articleDiv.replaceChild(newNode, oldNode);

В данном случае заменяем первый параграф заголовком h2: Output