Создание, добавление и удаление элементов 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 и текстовый узел. Затем текстовый узел добавлен в элемент заголовка.  После чего  заголовок добавлен в один из элементов веб-страницы, чтобы его можно было увидеть на странице.

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

Но совсем необязательно  для создания текста внутри элемента иметь дополнительный текстовый узел,  для этого есть свойство 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

Читайте также  Координаты элемента в окне

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

Для замены одного элемента другим служит метод 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 = 
{ "Рыбы": { "Карась": {}, "Щука": {} }, 
"Деревья": { "Хвойные": { "Дуб": {}, "Ель": {} }, 
"Цветковые": { "Осина": {}, "Тополь": {} } } };

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

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

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

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

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

Об авторе

admin administrator

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

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