Javascript insertbefore мы appendchild

Добавление и удаление узлов

В этой главе мы рассмотрим, как создавать новые элементы «на лету» и заполнять их данными.

Создание элементов: createElement

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

document.createElement(tag) . Создает новый элемент с указанным тегом:

 var div = document.createElement('div'); 

 var textElem = document.createTextNode('Тут был я'); 

Новому элементу тут же можно поставить свойства:

var newDiv = document.createElement('div'); newDiv.className = 'myclass'; newDiv.id = 'myid'; newDiv.innerHTML = 'Привет, мир!'; 

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

Новый элемент можно также склонировать из существующего:

newElem = elem.cloneNode(true) 

Клонирует элемент elem, вместе с атрибутами, включая вложенные в него.

newElem = elem.cloneNode(false) 

Клонирует элемент elem, вместе с атрибутами, но без подэлементов.

Добавление элемента: appendChild, insertBefore

Чтобы DOM-узел был показан на странице, его необходимо вставить в документ.

Для этого у любого элемента есть метод appendChild :

Добавляет elem в список дочерних элементов parentElem . Новый узел добавляется в конец списка. Следующий пример добавляет новый элемент в уже существующий div:

div> . div> script> var parentElem = document.body.children[0]; var newDiv = document.createElement('div'); newDiv.innerHTML = 'Привет, мир!'; parentElem.appendChild(newDiv); script> 

Вставляет elem в список дочерних parentElem , перед элементом nextSibling . Сделать новый div первым дочерним можно так:

div> . div> script> var parentElem = document.body.children[0]; var newDiv = document.createElement('div'); newDiv.innerHTML = 'Привет, мир!'; parentElem.insertBefore(newDiv, parentElem.firstChild); script> 

Вместо nextSibling может быть null, тогда insertBefore работает как appendChild .

parentElem.insertBefore(elem, null); // то же, что и: parentElem.appendChild(elem) 

Все методы вставки возвращают вставленный узел, например parent.appendChild(elem) возвращает elem .

Удаление узлов: removeChild

Для удаления узла есть два метода:

Удаляет elem из списка детей parentElem.

Среди детей parentElem заменяет currentElem на elem . Оба этих метода возвращают удаленный узел. Они просто вынимают его из списка, никто не мешает вставить его обратно в DOM в будущем.

Если вы хотите переместить элемент на новое место — не нужно его удалять со старого.

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

Конечно же, это очень удобно.

Например, поменяем элементы местами:

div>Первый div> div>Второй div> script> var first = document.body.children[0]; var last = document.body.children[1]; // нет необходимости в предварительном removeChild(last) document.body.insertBefore(last, first); // поменять местами  script> 

Пример: показ сообщения

В качестве реального примера рассмотрим добавление сообщения на страницу. Чтобы показывалось посередине экрана и было красивее, чем обычный alert .

HTML-код для сообщения (без JS):

style> .message < width: 300px; height: 130px; border: 1px solid gray; text-align: center; > .message h1 < color: red; background: azure; font-size: 16px; height: 30px; line-height: 30px; margin: 0; > .message .content < height: 50px; padding: 10px; >  style> div class="message"> h1>Заголовок h1> div class="content">Текст Сообщения div> input class="ok" type="button" value="OK"/> div> 

Как видно — сообщение вложено в div фиксированного размера message и состоит из заголовка h1, тела content и кнопки OK, которая нужна, чтобы сообщение закрыть.

Кроме того, добавлено немного стилей, чтобы как-то смотрелось.

Создание сообщения

Для создания сложных структур DOM, как правило, используют либо готовый «шаблонный узел» и метод cloneNode , либо свойство innerHTML .

Следующая функция создает сообщение с указанным телом и заголовком.

function createMessage(title, body) < // (1) var container = document.createElement('div'); // (2) container.innerHTML = '
' + title + ' \ 
'
 \ \
 '; // (3) return container.firstChild; > 

Как видно, она поступает довольно хитро. Чтобы создать элемент по текстовому шаблону, она сначала создает временный элемент container (1), а потом записывает (2) сообщение как innerHTML временного элемента. Теперь готовый элемент можно получить как container.firstChild и вернуть в (3).

Добавление

Полученный элемент можно добавить в DOM:

var messageElem = createMessage('Привет, Мир!', 'Я - элемент DOM!') document.body.appendChild(messageElem); 

 html> head> meta charset="utf-8"> link type="text/css" rel="stylesheet" href="alert.css" /> head> body> script> function createMessage(title, body) < var container = document.createElement('div'); container.innerHTML = '
' + title + ' \ 
'
 \ \
 '; return container.firstChild; > var messageElem = createMessage('Привет, Мир!', 'Я - элемент DOM!') document.body.appendChild(messageElem); script> body> html> 

Текстовые узлы, тонкости использования

Как правило, при создании узлов и заполнении их используется innerHTML . Но текстовые узлы тоже имеют интересную область применения.

У них есть две особенности.

Допустим, у нас есть пустой узел DOM elem .

Одинаковый ли результат дадут эти скрипты?

elem.appendChild(document.createTextNode(text)); 

div> div> script> var text = 'текст'; var elem = document.body.children[0]; elem.appendChild(document.createTextNode(text)); script> 

div> div> script> var text = 'текст'; var elem = document.body.children[0]; elem.innerHTML = text; script> 

1. При создании текстового узла createTextNode('<b>. </b>') любые специальные символы и теги в строке будут интерпретированы как текст. А innerHTML вставит их как HTML.
2. Во всех современных браузерах (кроме IE <8) создание и вставка текстового узла работает гораздо быстрее, чем присвоение HTML.

Итого

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

• document.createElement(tag) — создает элемент;
• document.createTextNode(value) — создает текстовый узел;
• elem.cloneNode(deep) — клонирует элемент, если deep == true , то со всеми потомками.

Вставка и удаление узлов:

• parent.appendChild(elem) ;
• parent.insertBefore(elem, nextSibling) ;
• parent.removeChild(elem) ;
• parent.replaceChild(elem, currentElem) .

Все эти методы возвращают elem .

Запомнить порядок аргументов очень просто: новый(вставляемый) элемент — всегда первый.

Методы для изменения DOM также описаны в спецификации DOM Level 1.

Источник

Действия с элементами на странице — Старые методы insertBefore и appendChild, removeChild и replaceChild

Эта статья дополняет предыдущую, в которой проводились действия с элементами на странице с использованием современных методов .

Здесь мы продолжим работать с элементами на странице и разберем устаревшие конструкции, которые, еще встречаются в коде . И поэтому их необходимо знать .

Метод appendChild

Метод appendChild позволяет вставить элемент в конец какого-либо другого элемента.

Метод appendChild это аналог более современного метода append.

Пример 1.1

Вернемся к примеру 2.2 из прошлой статьи, в котором использовался метод append.

Но теперь будем работать с методом appendChild. И вставим тег div в конец другого элемента.

'use strict'; // Новый div const div = document.createElement("div"); div.classList.add('black'); // Доступ к элементу const wrapper = document.querySelector('.wrapper'); wrapper.appendChild(div); 

Итак, метод appendChild аналогичен методу append.

Метод insertBefore

Раньше таких методов, как prepend, before и after не существовало .

Но был метод insertBefore (в переводе «вставить перед»), который позволяет вставить элемент перед другим элементом.

Метод insertBefore имеет следующий синтаксис:

родитель.insertBefore(элемент, перед кем вставить)

С помощью метода insertBefore вставим новый тег div перед вторым сердцем , как в примере 4.1 из прошлой статьи, где использовался метод before.

Пример 2.1

'use strict'; /* Доступ к родителю и к дочерним элементам */ const wrapper = document.querySelector('.wrapper'), hearts = document.querySelectorAll('.heart'); // Новый div const div = document.createElement("div"); div.classList.add('black'); wrapper.insertBefore(div, hearts[1]); 

Перед вторым сердцем появился черный квадрат.

Теперь с помощью метода insertBefore вставим новый тег div перед третьим сердцем , то есть после второго сердца как в примере 4.2 из прошлой статьи, где использовался метод after.

Пример 2.2

'use strict'; /* Доступ к родителю и к дочерним элементам */ const wrapper = document.querySelector('.wrapper'), hearts = document.querySelectorAll('.heart'); // Новый div const div = document.createElement("div"); div.classList.add('black'); wrapper.insertBefore(div, hearts[2]); 

Перед третьим сердцем появился черный квадрат.

Итак, метод insertBefore это устаревший метод и ранее он использовался вместо современных методов prepend , before и after .

Метод removeChild

Но был метод removeChild — позволяет удалить дочерний элемент.

Метод removeChild имеет следующий синтаксис:

родитель.removeChild(элемент)

При помощи метода removeChild удалим одно из сердец.

'use strict'; /* Доступ к родителю и к дочерним элементам */ const wrapper = document.querySelector('.wrapper'), hearts = document.querySelectorAll('.heart'); wrapper.removeChild(hearts[1]); 

С помощью метода removeChild удалили 2-е сердце.

Стоит отметить и это видно из примеров, что при работе со старыми методами insertBefore и removeChild действия с элементами на странице происходят через родителя : приходится обращаться к родительскому элементу и уже через него работать с дочерним. В этом плане современные методы более удобны.

Метод replaceChild

Метод replaceChild — это устаревший аналог более современного метода replaceWith.

Метод replaceChild позволяет заменить дочерний элемент на новый (выбранный).

родитель.replaceChild(новый элемент, заменяемый элемент);

'use strict'; /* Доступ к кругам, затем к родителю сердец и к самим сердцам */ const circles = document.querySelectorAll('.circle'), wrapper = document.querySelector('.wrapper'), hearts = document.querySelectorAll('.heart'); // Меняем 2-е сердце на круг wrapper.replaceChild(circles[1], hearts[1]); 

В результате на месте второго сердца появился круг. Это можно увидеть в консоли во вкладке Elements .

И здесь мы снова видим, что современный метод replaceWith более удобен, чем метод replaceChild, так как первый позволяет работать с элементами на странице без участия родительского элемента .

Читайте также.

Метод write() объекта document

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

Источник