Метод appendChild() в HTML DOM

Объект элемента HTML DOM

appendChild()Метод добавляет узел в конец списка подузлов указанного родительского узла.

Если указанный подузел является ссылкой на существующий узел в документе, appendChild() перемещает его из текущей позиции в новую (см.下面的 "Более примеров").

ИспользованиеinsertBefore()Метод вставляет новый подузел перед указанным существующим подузлом.

Синтаксис:

node.appendChild(node)

var newElem = document.createElement("h3"); // Создать новый элемент h3
var newContent = document.createTextNode("Привет, мир!"); // Создать некоторое текстовое содержимое　
newElem.appendChild(newContent); // Добавить текстовый узел в новый созданный h3　
document.body.appendChild(newElem); // Добавить созданный элемент и его содержимое в DOM

Внимание:Если нужно создать новый элемент с текстом, запомните, что текст нужно создавать в виде узла Text, затем добавить его к элементу, а затем добавить элемент в документ.

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

Метод appendChild() полностью поддерживается всеми браузерами:

Значение параметра

Технические детали

Более примеров

Создайте элемент <p> и добавьте его в элемент <div>:

var para = document.createElement("p"); // Создать узел <p>
var txt = document.createTextNode("This is a paragraph."); // Создать узел текста
para.appendChild(txt); // Добавить текст в <p>
document.getElementById("demo").appendChild(para); // Добавить <p> в <div>

Создайте элемент <p> и добавьте его в конец основного тела документа:

var para = document.createElement("p"); // Создать узел <p>
var txt = document.createTextNode("This is a paragraph."); // Создать узел текста
para.appendChild(txt); // Добавить текст в <p>
document.body.appendChild(para);// Добавить <p> в body

Этот пример перемещает элемент из его текущего положения в новое положение:

var elem = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(elem);

См. также

HTML DOM: справочникnodeМетод .hasChildNodes()

HTML DOM: справочникnodeМетод .insertBefore()

HTML DOM: справочникnodeМетод .removeChild()

HTML DOM: справочникnodeМетод .replaceChild()

HTML DOM: справочникМетод document.createElement()

HTML DOM: справочникМетод document.createTextNode()

HTML DOM: справочникМетод document.adoptNode()

HTML DOM: справочникМетод document.importNode()

Объект элемента HTML DOM