Метод appendChild
Метод appendChild позволяет вставить в конец какого-либо другой элемент. Чаще всего используется после создания элемента с помощью createElement .
Синтаксис
родитель.appendChild(элемент);
Пример
Давайте создадим абзац, установим ему текст и поместим на страницу в конец блока #parent :
1
2
3
let parent = document.querySelector(‘#parent’); let p = document.createElement(‘p’); p.textContent = ‘!’; parent.appendChild(p);
Результат выполнения кода:
Пример
Дан ul . Давайте разместим в нем 9 тегов li , при этом их текстом сделаем порядковые номера:
let parent = document.querySelector(‘#parent’); for (let i = 1; i
Результат выполнения кода:
Пример
Давайте заполним таблицу tr-ками и td-шками:
Результат выполнения кода:
| 1 | 2 | 3 |
| 1 | 2 | 3 |
| 1 | 2 | 3 |
Смотрите также
- метод append ,
который вставляет элементы в конец - метод insertBefore ,
который вставляет элемент в перед элементом - метод insertAdjacentElement ,
который вставляет элемент в заданное место - метод insertAdjacentHTML ,
который вставляет теги в заданное место
Node.appendChild
Node.appendChild() добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе, то функция appendChild() перемещает его из текущей позиции в новую позицию (нет необходимости удалять узел из родительского узла перед добавлением его к какому-либо другому узлу).
Это означает, что узел не может находиться в двух точках документа одновременно. Поэтому, если у узла уже есть родитель, он сначала удаляется, а затем добавляется в новую позицию. Node.cloneNode() можно использовать для создания копии узла перед добавлением его в новый родительский элемент. Обратите внимание, что копии, сделанные с помощью cloneNode , не будут автоматически синхронизироваться.
Если данный дочерний элемент является DocumentFragment , то все содержимое DocumentFragment перемещается в дочерний список указанного родительского узла.
Примечание: Доступен новый API! > ParentNode.append() (en-US) поддерживает несколько аргументов и добавляемые строки.
Синтаксис
var child = element.appendChild(child);
- element родительский элемент.
- child это элемент вставляется в конец element .
Возвращаемое значение
Возвращается дочерний элемент ( aChild ), кроме тех случаев, когда child это DocumentFragment , в таком случае возвращается пустой DocumentFragment .
Примечание
Цепочка может работать не так, как ожидалось, из-за того, что appendChild() возвращает дочерний элемент:
let aBlock = document .createElement("block") .appendChild(document.createElement("b"));
Присваивает переменной aBlock элемент , а не , как вы могли ожидать.
Пример
// Создаём новый элемент параграфа, и вставляем в конец document body var p = document.createElement("p"); document.body.appendChild(p);
Спецификации
| Specification |
|---|
| DOM Standard # dom-node-appendchild |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Node.removeChild
- Node.replaceChild
- Node.insertBefore
- Node.hasChildNodes
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– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.
appendChild()
Метод appendChild() добавляет узел в качестве последнего дочернего узла в указанный родительский элемент.
Если узел, который добавляется в качестве последнего дочернего узла текущего элемента, уже имеется в HTML-документе и расположен в другом родительском элементе, то он удаляется из своего текущего родительского элемента и добавляется в качестве последнего дочернего узла в новый родительский элемент. Проще говоря узел может быть перемещён с его текущей позиции в другое место.
Если добавляемый узел находится в том же родителе, к которому он добавляется, то он будет просто перемещён с текущего положения в конец родителя.
Примечание: если нужно создать новый элемент для добавления, то сначала нужно воспользоваться методом createElement(), а затем использовать метод appendChild() для только что созданного элемента. Для вставки элемента до указанного дочернего узла текущего родителя, используйте метод insertBefore().
Синтаксис
elem.appendChild(узел);
elem — родительский элемент, в который будет добавлен узел, передаваемый в качестве аргумента.
Аргументы
- узел: элемент, который будет добавлен в конец списка дочерних элементов указанного родителя.
Возвращаемое значение
- Возвращает ссылку на добавленный узел (element).
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 6 янв. 2024 г. 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– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.