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

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);

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

Specification
DOM Standard
# dom-node-appendchild

Совместимость с браузерами

BCD tables only load in the browser

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