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() возвращает дочерний элемент:

js

let aBlock = document.createElement('block').appendChild( document.createElement('b') );

Присваивает переменной aBlock элемент <b></b>, а не <block></block>, как вы могли ожидать.

Пример

js

// Создаём новый элемент параграфа, и вставляем в конец document body
var p = document.createElement("p");
document.body.appendChild(p);

Спецификация

Смотрите также