Element.append()
Метод Element.append() вставляет узлы или строки с текстом в конец Element . Строки с текстом вставляются как текстовое содержимое .
- Метод Element.append() позволяет вставлять строки с текстом , в то время как Node.appendChild() работает только с узлами .
- При вызове метод Element.append() ничего не возвращает, в то время как Node.appendChild() возвращает вставленный узел .
- С помощью Element.append() можно вставить сразу несколько узлов или строк текста, в то время как Node.appendChild() умеет вставлять по одной сущности за раз.
Синтаксис
append(. nodesOrDOMStrings);
Аргументы
Один или несколько узлов или строк с текстом , которые необходимо вставить.
Исключения
Случается, когда узел не может быть вставлен в существующую иерархию элементов.
Примеры
Вставка элемента
let div = document.createElement("div"); let p = document.createElement("p"); div.append(p); console.log(div.childNodes); // NodeList []
Вставка текста
let div = document.createElement("div"); div.append("Какой-то текст"); console.log(div.textContent); // "Какой-то текст"
Вставка и текста, и элемента сразу
let div = document.createElement("div"); let p = document.createElement("p"); div.append("Какой-то текст", p); console.log(div.childNodes); // NodeList [ #text "Какой-то текст",]
Область видимости метода нерасширяема
Метод append() не работает с оператором with . Подробнее читайте в справке по Symbol.unscopables .
let div = document.createElement("div"); with (div) append("foo"); > // ReferenceError: append is not defined
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-parentnode-append① |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
- Element.prepend() (en-US)
- Node.appendChild()
- Element.after() (en-US)
- Element.insertAdjacentElement()
- NodeList
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
document.createElement
В HTML-документах создаёт элемент c тем тегом, что указан в аргументе или HTMLUnknownElement , если имя тега не распознаётся.
В XUL-документах создаёт указанный в аргументе элемент XUL.
В остальных случаях создаёт элемент с нулевым NamespaceURI.
Параметры
var element = document.createElement(tagName, [options]);
- element — созданный объект элемента.
- tagName — строка, указывающая элемент какого типа должен быть создан. nodeName создаётся и инициализируется со значением tagName .
- options — необязательный параметр, объект ElementCreationOptions , который может содержать только поле is , указывающее имя пользовательского элемента, созданного с помощью customElements.define() (см. Веб-компоненты).
Пример
Данный пример создаёт новый элемент и вставляет его перед элементом с идентификатором org_div1 :
div>h1>Привет!h1>div> div id="org_div1">Текст выше сгенерирован автоматически.div>
.body.onload = addElement; var my_div = (newDiv = null); function addElement() // Создаём новый элемент div // и добавляем в него немного контента var newDiv = document.createElement("div"); newDiv.innerHTML = "Привет!
"; // Добавляем только что созданный элемент в дерево DOM my_div = document.getElementById("org_div1"); document.body.insertBefore(newDiv, my_div); >
Примечания
Если существуют атрибуты со значениями по умолчанию, атрибуты узлов предоставляющие их создаются автоматически и применяются к элементу.
Для создания элементов с заданным пространством имён используйте метод createElementNS.
Реализация createElement в Gecko не соответствует DOM спецификации для XUL и XHTML документов: localName и namespaceURI не устанавливаются в null в созданном документе. Смотрите баг 280692 для подробностей.
Для обратной совместимости с предыдущими версиями спецификации пользовательских элементов некоторые браузеры позволяют передавать здесь строку вместо объекта, где значением строки является имя тега пользовательского элемента.
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-document-createelement① |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Создание, вставка и удаление элементов в JavaScript
На этом уроке мы научимся создавать узлы-элементы ( createElement ) и текстовые узлы ( createTextNode ). А также рассмотрим методы, предназначенные для добавления узлов к дереву ( appendChild , insertBefore ) и для удаления узлов из дерева ( removeChild ).
Создания элементов и текстовых узлов
Создание элемента в JavaScript выполняется с помощью метода createElement :
// $elem – переменная, в которую сохраним созданный элемент const $elem = document.createElement('tag');
Вместо tag необходимо указать тег того элемента, который нужно создать.
Например, создадим элемент p:
const $elem = document.createElement('p');
Создание текстового узла в JavaScript осуществляется посредством метода createTextNode :
const text = document.createTextNode('text');
В аргументе createTextNode необходимо поместить текст, который должен иметь этот текстовый узел.
Например, создадим текстовый узел с текстом «Я новый текстовый узел»:
const text = document.createTextNode('Я новый текстовый узел');
Вставка элементов и текстовых узлов
Чтобы созданный элемент (или текстовый узел) появился в нужном месте страницы его необходимо туда вставить.
Выполнить в JavaScript это можно посредством различных методов.
Одни из самых старых – appendChild и insertBefore .
appendChild
appendChild предназначен для вставки узла в конец элемента (т.е. после последнего его дочернего узла) для которого этот метод вызывается:
// $elem – элемент, во внутрь которого после последнего его дочернего узла необходимо вставить узел $node $elem.appendChild($node);
В качестве результата этот метод возвращает добавленный на страницу узел.
insertBefore
insertBefore предназначен для вставки узла node перед nextSibling в $elem :
$elem.insertBefore(node, nextSibling);
Если в качестве nextSibling передать null , то данный метод вставит node после последнего дочернего узла $elem . Т.е. выполнит действия аналогично appendChild .
В качестве результата метод insertBefore возвращает вставленный узел.
Современные методы вставки и замены
В JavaScript имеются следующие современные методы для вставки элементов и строк:
- node.append – для добавления узлов или строк в конец node ;
- node.prepend – для вставки узлов или строк в начало node ;
- node.before – для вставки узлов или строк до node ;
- node.after – для вставки узлов или строк после node .
Пример использования методов:
message.
beforeafterprepend
message.
append
InsertAdjacent
В JavaScript имеется набор методов insertAdjacent, которые позволяют вставить один или несколько узлов в указанную позицию position относительно $elem
Всего существует 3 таких метода:
- $elem.insertAdjacentElement(position, element) – для вставки элемента ( element );
- $elem.insertAdjacentHTML(position, htmlString) – для вставки строки ( htmlString ) как HTML;
- $elem.insertAdjacentText(position, string) – для вставки строки ( string );
Значение position , может быть, одним из следующих:
- ‘beforebegin’ – непосредственно перед $elem ;
- ‘afterbegin’ – перед первым дочерним узлом $elem ;
- ‘beforeend’ – после последнего дочернего узла $elem ;
- ‘afterend’ – сразу после $elem ;
Пример использования insertAdjacentHTML :
DocumentFragment
DocumentFragment – это облегчённая версия Document . Он используется в качестве обёртки для временного хранения HTML элементов.
После формирования фрагмента его можно использовать в различных методах (например, append , prepend и др.). При этом, когда мы его вставляем, то вставляется только его содержимое.
DocumentFragment в основном используется, когда необходимо вставить множество элементов на страницу, а также для элемента .
Использование DocumentFragment в подобных сценариях может значительно ускорить ваш сайт. Т.к. изменение DOM — это очень затратная операция. А с помощью DocumentFragment это можно сделать всего за одну операцию.
DocumentFragment не является частью видимой DOM. Изменения, внесенные во фрагмент, не влияют на документ и производительность страницы.
При использовании современных методов для вставки элементов можно не использовать DocumentFragment , т.к. в отличие от appendChild и insertBefore они позволяют вставлять сразу массив элементов.
Например, перепишем первый пример с использованием append :
Замена и клонирование узлов
Замену одних узлов другими в JavaScript можно выполнить с помощью методов replaceChild (когда нужна поддержка «старых» браузеров) и replaceWith .
replaceChild
replaceChild предназначен для замены одного дочернего узла parentNode другим:
parentNode.replaceChild(newChild, oldChild);
- newChild – элемент, которым необходимо заменить oldChild ;
- parentNode – родительский узел по отношению oldChild .
В качестве результата данный метод возвращает узел, который был заменён новым узлом, т.е. oldChild .
-
второй
на новый с текстом «Five».
replaceWith
node.replaceWith позволяет node заменить заданными узлами или строками:
node.replaceWith(. nodes, strings)
-
второй
другими элементами:
cloneNode – клонирование узла
cloneNode предназначен для создания копии узла:
let copy = node.cloneNode(deep);
- node – узел, который нужно клонировать;
- copy – переменная, в которую нужно поместить новый узел, который будет копией node ;
- deep – глубина клонирования (по умолчанию false , т.е. выполняется клонирование только самого элемента node без детей); если установить true , то node будет скопирован со всеми его детьми.
-
и вставим её в конец .
Удаление узлов
Удалить узел из DOM можно в JavaScript с помощью методов removeChild (считается устаревшим) и remove .
removeChild
parent.removeChild(node)
Для удаления узла необходимо вызвать метод removeChild у родительского элемента и передать ему в качестве аргумента его сам ( node ).
В качестве результата метод removeChild возвращает удалённый узел.
Например, удалим элемент, а затем вставим его в другое место:
.
remove
Ещё один способ удалить узел – это использовать метод remove .
node.remove()
Например, удалим элемент при нажатии на него:
Когда мы вставляем элементы, они удаляются со старых мест.
Задачи
1. Имеется два списка в документе. Необходимо переместить элементы из второго списка в первый.
2. Создать список, текстовое поле и 2 кнопки. Написать код на языке JavaScript, который в зависимости от нажатой кнопки добавляет текст, находящийся в текстовом поле, в начало или в конец списка.
3. Напишите функцию, удаляющую все текстовые узлы у элемента.
5. Удалить содержимое элемента, т.е. все его дочерние узлы
6. Заменить текстовый узел "Модель" текстовым узлом "Чертёж", который необходимо создать с помощью метода createTextNode().
7. Поменяйте местами первый и последний дочерние узлы у списка ul с .
Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии: 5
17.05.2021, 13:28
Добрый день! Подскажи, пожалуйста, по первой задаче из «Добавление узлов дерева». Как ее решить было бы «правильно», как бы решал ты сам?
Я решил таким образом:
Александр Мальцев
19.05.2021, 14:29
Привет! Её можно решить различными способами. Просто когда мы вставляем по одному элементу — это не лучший вариант, т.к. изменение DOM довольно дорогая операция. Лучше все сразу.
Набросал 4 различных способа (1 лучше не использовать, сделал для примера):
Ссылка на пример: modifying-document-task-01
14.05.2021, 18:32
MDN пишет про второй параметр «Node.insertBefore()»:
В Mozilla Firefox, если referenceElement не задан или равен null, newElement вставляется в конец списка дочерних элементов. В IE, referenceElement равный undefined, сгенерируется исключение "Invalid argument", в то время как Chrome сгенерирует исключение "Uncaught TypeError", ожидая 2 аргумента."
Возможно, нужно немного исправить выше. Столкнулся с ошибкой в Хроме, не указав второй параметр.
Александр Мальцев
19.05.2021, 14:13
Спасибо, поправил этот момент.
19.10.2018, 12:01
Я пытаюсь реализовать механизм, где к примеру по клику на кнопку появляется список в имеющимся родительском элементе div по событию onchange передаю выбранные параметры в функцию js, далее отправляю данные на сервер, получаю следующий список данных, возвращаю в success, после использую шаблоны template(js)
чтобы прокрутить в цикле получить данные и подставить значение в тег списка в этом же теге снова передаю данные с помощью onchange той же функции js, где она должна так же отправить данные на сервер, получить ответ и создать следующий DOM элемент div с другим id вставив тег select>option и вывести следом за предыдущим в родительском элементе…
То есть при каждом возврате данных с сервера мне надо чтобы создавался DOM элемент, в него добавлялся тег или к примеру(в зависимости от типа поля).
При первом вызове этой функции все отрабатывает правильно, создает элемент, отображается в DOM структуре, при повторном попадании создает также элемент div присваивает ему id, но когда использую appendChild() ругается: Cannot read property 'appendChild' of null. Я как понимаю скрипт отрабатывается раньше загрузки разметки… Какими путями можно решить данную задачу?
Популярное
- 1. Слайдер для сайта на чистом CSS и JavaScript 375.1K
- 2. Модальное окно Bootstrap для сайта 370K
- 3. Bootstrap 3 - Navbar (горизонтальное меню) 368.5K
- 4. Маска ввода для HTML элемента input 357.2K
- 5. CSS медиа-запросы (media queries) 349.6K
- 6. Форма обратной связи для сайта с отправкой на почту 330.5K
- 7. Bootstrap - Carousel (карусель) 298.9K
Метод insertBefore
Метод insertBefore позволяет вставить элемент перед другим элементом. Чаще всего используется после создания элемента с помощью createElement . Метод применяется к родителю того элемента, перед которым произойдет вставка.
Синтаксис
родитель.insertBefore(элемент, перед кем вставить);
Пример
Создадим абзац и поместим его перед вторым абзацем:
elem 1
elem 2
elem 3
let parent = document.querySelector('#parent'); let before = document.querySelector('#before'); let p = document.createElement('p'); p.textContent = '!'; parent.insertBefore(p, before);
Результат выполнения кода:
Пример
Добавим абзац в начало элемента #parent . Для этого вставим наш абзац перед первым потомком #parent . Этого потомка можно найти с помощью firstElementChild :
elem 1
elem 2
let parent = document.querySelector('#parent'); let p = document.createElement('p'); p.textContent = '!'; parent.insertBefore(p, parent.firstElementChild);
Результат выполнения кода:
Пример
При передаче вторым параметром null метод insertBefore срабатывает как appendChild . В то же время, если в элементе нет дочерних элементов, firstElementChild возвращает null . Следовательно, добавлять в начало элемента можно даже тогда, когда в нем нет дочерних элементов:
let parent = document.querySelector('#parent'); let p = document.createElement('p'); p.textContent = '!'; parent.insertBefore(p, parent.firstChild);
Результат выполнения кода:
Смотрите также
- метод prepend ,
который вставляет элементы в начало - метод appendChild ,
который вставляет элементы в конец родителя - метод insertAdjacentElement ,
который вставляет элемент в заданное место - метод insertAdjacentHTML ,
который вставляет теги в заданное место