Метод appendChild()
Пример
Добавить элемент в список:
var node = document.createElement("LI"); // Создать <li> node
var textnode = document.createTextNode("Вода"); // Создайте текстовый узел
node.appendChild(textnode); // Добавьте текст к <li>
document.getElementById("myList").appendChild(node); // Добавить <li> в <ul> with id="myList"
Перед добавлением:
- Кофе
- Чай
После добавления:
- Кофе
- Чай
- Вода
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Метод appendChild() добавляет node в качестве последнего дочернего элемента узла.
Совет: Если вы хотите создать новый абзац с текстом, не забудьте создать текст в виде текстового узла, который вы добавляете к абзацу, затем добавьте абзац в документ.
Вы также можете использовать этот метод для перемещения элемента из одного элемента в другой (см. "Ещё примеры").
Совет: Используйте метод insertBefore() для вставки нового дочернего узла перед указанным существующим дочерним узлом.
Поддержка браузера
Метод | |||||
---|---|---|---|---|---|
appendChild() | Да | Да | Да | Да | Да |
Синтаксис
node.appendChild(node)
Параметр значений
Параметр | Тип | Описание |
---|---|---|
node | Объект узла | Требуемый. Объект узла, который вы хотите добавить |
Технические детали
Возвращает значение | Объект node, представляющий добавленный узел |
---|---|
DOM Версия | Базовый уровень 1 Объект узла |
Ещё примеры
Пример
Переместить элемент списка из одного списка в другой:
var node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
Перед добавлением:
- Кофе
- Чай
- Вода
- Молоко
После добавления:
- Кофе
- Чай
- Молоко
- Вода
Пример
Создайте элемент <p> и добавьте его к элементу <div>:
var para = document.createElement("P"); // Создать <p> node
var t = document.createTextNode("Это параграф."); // Создайте текстовый узел
para.appendChild(t); // Добавьте текст к <p>
document.getElementById("myDIV").appendChild(para); // Добавьте <p> к <div> with id="myDIV"
Попробуйте сами »
Пример
Создайте элемент <p> с некоторым текстом и добавьте его в конец текста документа:
var x = document.createElement("P"); // Create a <p> node
var t = document.createTextNode("Это параграф."); // Создайте текстовый узел
x.appendChild(t); // Добавьте текст к <p>
document.body.appendChild(x); // Добавьте <p> к <body>
Попробуйте сами »
Связанные страницы
HTML DOM Справочник: element.hasChildNodes() Метод
HTML DOM Справочник: element.insertBefore() Метод
HTML DOM Справочник: element.removeChild() Метод
HTML DOM Справочник: element.replaceChild() Метод
HTML DOM Справочник: document.createElement() Метод
HTML DOM Справочник: document.createTextNode() Метод
HTML DOM Справочник: document.adoptNode() Метод
HTML DOM Справочник: document.importNode() Метод