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

Последнее обновление: 1.11.2015

Для создания элементов объект 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:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<div class="article">
		<h3>Заголовок статьи</h3>
		<p>Первый абзац</p>
		<p>Второй абзац</p>
	</div>
<script>
var articleDiv = document.querySelector("div.article");
// создаем элемент
var elem = document.createElement("h2");
// создаем для него текст
var elemText = document.createTextNode("Привет мир");
// добавляем текст в элемент в качестве дочернего элемента
elem.appendChild(elemText);
// добавляем элемент в блок div
articleDiv.appendChild(elem);
</script>
</body>
</html>

Сначала создаем обычный элемент заголовка 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.

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

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

Для удаления элемента вызывается метод 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:

Замена элемента в JavaScript
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850