Метод 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() можно использовать не только для добавления элементов, но и для перемещения уже существующих элементов в другие места на странице.