Аннотация

Node.appendChild() добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе, то функцияappendChild() перемещает его из текущей позиции в новую позицию (нет необходимости удалять узел из родительского узла перед добавлением его к какому-либо другому узлу).

Это означает, что узел не может находиться в двух точках документа одновременно. Поэтому, если у узла уже есть родитель, он сначала удаляется, а затем добавляется в новую позицию.Node.cloneNode() можно использовать для создания копии узла перед добавлением его в новый родительский элемент. Обратите внимание, что копии, сделанные с помощьюcloneNode , не будут автоматически синхронизироваться.

Если данный дочерний элемент являетсяDocumentFragment, то все содержимоеDocumentFragment перемещается в дочерний список указанного родительского узла.

Синтаксис

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 bodyvar p = document.createElement("p");document.body.appendChild(p);

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

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

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

• Node.removeChild
• Node.replaceChild
• Node.insertBefore
• Node.hasChildNodes