Метод appendChild() в JavaScript
Метод appendChild()
в JavaScript используется для добавления нового дочернего элемента в конец родительского элемента.
Синтаксис метода appendChild()
выглядит следующим образом:
parentElement.appendChild(newElement);
где parentElement
— это элемент, в который необходимо добавить новый дочерний элемент, а newElement
— это элемент, который необходимо добавить.
Например, допустим, у нас есть следующий HTML-код:
<div id="parent">
<p>Первый абзац</p>
</div>
Мы можем добавить новый абзац в конец элемента с id=»parent» следующим образом:
const parentElement = document.getElementById("parent");
const newElement = document.createElement("p");
const textNode = document.createTextNode("Второй абзац");
newElement.appendChild(textNode);
parentElement.appendChild(newElement);
Здесь мы сначала получаем элемент с id=»parent» с помощью метода getElementById()
. Затем мы создаем новый элемент p
с помощью метода createElement()
, создаем текстовый узел для этого элемента с помощью метода createTextNode()
и добавляем этот текстовый узел к элементу p
с помощью метода appendChild()
. Наконец, мы добавляем новый элемент p
в конец элемента с id=»parent» с помощью метода appendChild()
.
После выполнения кода HTML-код будет выглядеть следующим образом:
<div id="parent">
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
Метод appendChild()
можно использовать не только для добавления элементов, но и для перемещения уже существующих элементов в другие места на странице.