Node.appendChild() добавляет узел в конец списка дочерних элементов указанного родительского узла. Если данный дочерний элемент является ссылкой на существующий узел в документе, то функция appendChild() перемещает его из текущей позиции в новую позицию (нет необходимости удалять узел из родительского узла перед добавлением его к какому-либо другому узлу).
Это означает, что узел не может находиться в двух точках документа одновременно. Поэтому, если у узла уже есть родитель, он сначала удаляется, а затем добавляется в новую позицию. {{domxref("Node.cloneNode()")}} можно использовать для создания копии узла перед добавлением его в новый родительский элемент. Обратите внимание, что копии, сделанные с помощью cloneNode , не будут автоматически синхронизироваться.
Если данный дочерний элемент является {{domxref("DocumentFragment")}}, то все содержимое {{domxref("DocumentFragment")}} перемещается в дочерний список указанного родительского узла.
Доступен новый API!
ParentNode.append() поддерживает несколько аргументов и добавляемые строки.
var child = element.appendChild(child);
element родительский элемент.child это элемент вставляется в конец element.Возвращается дочерний элемент (aChild), кроме тех случаев, когда child это {{domxref("DocumentFragment")}}, в таком случае возвращается пустой {{domxref("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);