Node.appendChild
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
Аннотация
Node.appendChild() добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе, то функция appendChild() перемещает его из текущей позиции в новую позицию (нет необходимости удалять узел из родительского узла перед добавлением его к какому-либо другому узлу).
Это означает, что узел не может находиться в двух точках документа одновременно. Поэтому, если у узла уже есть родитель, он сначала удаляется, а затем добавляется в новую позицию. Node.cloneNode() можно использовать для создания копии узла перед добавлением его в новый родительский элемент. Обратите внимание, что копии, сделанные с помощью cloneNode , не будут автоматически синхронизироваться.
Если данный дочерний элемент является DocumentFragment, то все содержимое DocumentFragment перемещается в дочерний список указанного родительского узла.
Примечание:
Доступен новый API!
ParentNode.append() поддерживает несколько аргументов и добавляемые строки.
Синтаксис
var child = element.appendChild(child);
elementродительский элемент.childэто элемент вставляется в конецelement.
Возвращаемое значение
Возвращается дочерний элемент (aChild), кроме тех случаев, когда child это DocumentFragment, в таком случае возвращается пустой DocumentFragment.
Примечание
Цепочка может работать не так, как ожидалось, из-за того, что appendChild() возвращает дочерний элемент:
let aBlock = document
.createElement("block")
.appendChild(document.createElement("b"));
Присваивает переменной aBlock элемент <b></b>, а не <block></block>, как вы могли ожидать.
Пример
// Создаём новый элемент параграфа, и вставляем в конец document body
var p = document.createElement("p");
document.body.appendChild(p);
Спецификации
| Specification |
|---|
| DOM # dom-node-appendchild |
Совместимость с браузерами
Loading…