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
# dom-node-appendchild

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
appendChild

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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