пример
Добавление элемента в списке:
var node = document.createElement("LI"); // Create a <li>
node
var textnode = document.createTextNode("Water"); // Create a text node
node.appendChild(textnode); // Append the text to <li>
document.getElementById("myList").appendChild(node); // Append <li> to
<ul> with id="myList"Перед добавлением:
- Coffee
- Tea
После добавления:
- Coffee
- Tea
- Water
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
appendChild() метод добавляет узел в качестве последнего дочернего узла.
Совет: Если вы хотите создать новый абзац с текстом, не забудьте создать текст в виде узла Text , который вы добавите к пункту, затем добавить этот пункт к документу.
Вы также можете использовать этот метод , чтобы переместить элемент из одного элемента к другому (See "More Examples") .
Совет: Используйте insertBefore() метод , чтобы вставить новый дочерний узел перед указанным, существующим, дочерним узлом.
Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает метод.
| метод | |||||
|---|---|---|---|---|---|
| appendChild() | да | да | да | да | да |
Синтаксис
node .appendChild( node )Значения параметров
| параметр | Тип | Описание |
|---|---|---|
| node | Node object | Необходимые. Объект узла вы хотите добавить |
Технические подробности
| Возвращаемое значение: | Узел Объект, представляющий узел, присоединенный |
|---|---|
| DOM Version | Базовый уровень 1 Узел объект |
Еще примеры
пример
Переместить элемент списка из одного списка в другой:
var node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);Перед добавлением:
- Coffee
- Tea
- Water
- Milk
После добавления:
- Coffee
- Tea
- Milk
- Water
Попробуй сам " пример
Создание <p> элемент и добавить его в <div> элемент:
var para = document.createElement("P"); // Create a
<p> node
var t =
document.createTextNode("This is a paragraph.");
// Create a text node
para.appendChild(t);
// Append the text to <p>
document.getElementById("myDIV").appendChild(para);
// Append <p> to <div> with id="myDIV" Попробуй сам " пример
Создание <p> элемент с текстом и добавить его в конец тела документа:
var x = document.createElement("P"); // Create a <p>
node
var t = document.createTextNode("This is a
paragraph."); // Create a text node
x.appendChild(t);
// Append the text to <p>
document.body.appendChild(x);
// Append <p> to <body> Попробуй сам " Похожие страницы
HTML DOM ссылка: href="met_node_haschildnodes.html"> element . hasChildNodes() Method href="met_node_haschildnodes.html"> element . hasChildNodes() Method
HTML DOM ссылка: href="met_node_insertbefore.html"> element . insertBefore() Method href="met_node_insertbefore.html"> element . insertBefore() Method
HTML DOM ссылка: href="met_node_removechild.html"> element . removeChild() Method href="met_node_removechild.html"> element . removeChild() Method
HTML DOM ссылка: href="met_node_replacechild.html"> element . replaceChild() Method href="met_node_replacechild.html"> element . replaceChild() Method
HTML DOM ссылка: href="met_document_createelement.html">document. createElement() Method href="met_document_createelement.html">document. createElement() Method
HTML DOM ссылка: href="met_document_createtextnode.html">document. createTextNode() Method href="met_document_createtextnode.html">document. createTextNode() Method
HTML DOM ссылка: href="met_document_adoptnode.html">document. adoptNode() Method href="met_document_adoptnode.html">document. adoptNode() Method
HTML DOM ссылка: href="met_document_importnode.html">document. importNode() Method href="met_document_importnode.html">document. importNode() Method