Элемент HTML DOM appendChild()
Примеры
Добавить элемент в список:
const node = document.createElement("LI");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
До:
- Coffee
- Tea
После:
- Coffee
- Tea
- Water
Переместить элемент из одного списка в другой:
const node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
До:
- Coffee
- Tea
- Water
- Milk
После:
- Coffee
- Tea
- Milk
- Water
Ниже приведены дополнительные примеры.
Определение и использование
Метод appendChild()
добавляет узел в качестве последнего потомка узла.
Совет: Если вы хотите создать новый абзац с текстом, не забудьте создать текст как узел «Текст», который вы добавляете к абзацу, а затем добавляете абзац к документу.
Вы также можете использовать этот метод для перемещения элемента из одного элемента в другой (см. «Дополнительные примеры»).
Смотрите также:
Синтаксис
node.appendChild(node)
Параметры
Parameter | Description |
node | Required. The node to append. |
Возвращаемое значение
Тип | Описание |
Узел | Добавленный узел |
Дополнительные примеры
Создайте элемент <p> и добавьте его к элементу <div>:
const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
Создайте элемент <p> и добавьте его в тело документа:
const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);
Методы связанных элементов:
Метод элемента hasChildNodes()
Связанные методы документа:
Метод документа createElement()
Поддержка браузера
element.appendChild()
является функцией DOM уровня 1 (1998 г.).
Он полностью поддерживается во всех браузерах:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |