Node.appendChild
Аннотация
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 Standard # dom-node-appendchild |
Совместимость с браузерами
BCD tables only load in the browser