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

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

Здравствуйте! С помощью JavaScript можно не только находить элементы на странице (о том как это делать читайте здесь) но также создавать элементы динамически и добавлять их в DOM. О том как это делать  и пойдет разговор в этом уроке.

Для  того  чтобы создать новый  элемент  на  веб-странице — в объекте document  есть следующие методы:

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

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

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

Рассмотрим небольшой пример:

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

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

Для добавления элементов на веб-страницу используются следующие методы:

  • appendChild(newNode):  добавляет новый элемент в конец того элемента у которого был вызван этот метод
  • insertBefore(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 article = document.querySelector("div.article");
// создаем элемент
var el = document.createElement("h3");
// создаем для него текст
var elTxt = document.createTextNode("Привет мир");
// добавляем текст в элемент в качестве дочернего элемента
el.appendChild(elTxt);
// добавляем элемент в блок div
article.appendChild(el);
</script>
</body>
</html>

Просмотреть  пример

В пример был создан обычный элемент заголовка h3 и текстовый узел. Затем текстовый узел добавлен в элемент заголовка.  После чего  заголовок добавлен в один из элементов веб-страницы, чтобы его можно было увидеть на странице.

Читайте также  Работа с атрибутами и изменение содержимого HTML-элементов.

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

var el = document.createElement("h3");
el.textContent = "Привет я заголовок";

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

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

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

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

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

Бывают такие ситуации когда  элементы  довольно сложны по составу, и  проще их скопировать. Для этого используется отдельный метод cloneNode().

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

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

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

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

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

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

Читайте также  Объект document. Как найти элемент на странице

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

Для замены одного элемента другим служит метод replaceChild(newNode, oldNode). Этот метод в качестве 1-го параметра принимает новый элемент, который заменяет старый элемент передаваемый в качестве 2-го параметра.

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

В данном примере заменяем первый параграф, только что созданным заголовком h2.

ИТОГИ.

Для того чтобы создать элемент используются  методы:

document.createElement(tag) — создает новый элемент.

document.createTextNode(text) — создает текстовый узел

Методы для вставки и удаления узлов

  • parent.appendChild(el) — добавляет элемент в конец существующего элемента
  • parent.insertBefore(el, nextSibling)— вставляет элемент перед существующим элементом
  • parent.removeChild(el) — удаляет элемент
  • parent.replaceChild(newElem, el) — заменяет один элемент на другой
  • parent.cloneNode(bool) — копирует элемент, если параметр bool=true то элемент копируется со  всеми дочерними элементами, а если false то без дочерних элементов

Задания

Функция вставки элементов

Напишите функцию insertAfter(newEl,oldEl) которая вставляет один элемент после другого в саму функцию в качестве параметров передаются  сами элементы.

Удаление всех потомков элемента

Напишите функцию removeChilds(el) которая удаляет все дочерние элементы у выбранного элемента.

Создание списка

Напишите код, который создает список и пункты списка пользователь вводит сам через функцию prompt.

Создание списка из объекта

Напишите функцию которая бы из объекта создавала список. Например пусть дан такой объект:

var obj = 
{ "Рыбы": { "Карась": {}, "Щука": {} }, 
"Деревья": { "Хвойные": { "Дуб": {}, "Ель": {} }, 
"Цветковые": { "Осина": {}, "Тополь": {} } } };

В результате надо получить список
Рыбы
Карась
Щука
Деревья
Хвойные
Дуб
Ель
Цветковые
Осина
Тополь

Читайте также  Как поменять стиль элемента через JavaScript

Посмотрите видео про добавление и удаление элементов  в DOM

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: