Метод appendChild в JavaScript

Метод appendChild позволяет вставить в конец какого-либо другой элемент. Чаще всего используется после создания элемента с помощью createElement.

Синтаксис

родитель.appendChild(элемент)

Пример

Давайте создадим абзац, установим ему текст и поместим на страницу в конец блока #parent:

<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.innerHTML = '!';
parent.appendChild(p);
// <div id="parent">
// <p>1</p>
// <p>2</p>
// <p>3</p>
// <p>!</p>
// </div>

Пример

Дан ul, давайте разместим в нем 9 тегов li, при этом их текстом сделаем порядковые номера:

<ul id="parent"></ul>
let parent = document.querySelector('#parent');
for (let i = 1; i <= 9; i++) {
let li = document.createElement('li');
li.innerHTML = i;
parent.appendChild(li);
}
// <ul id="parent">
// <li>1</li>
// <li>2</li>
// <li>3</li>
// <li>4</li>
// <li>5</li>
// <li>6</li>
// <li>7</li>
// <li>8</li>
// <li>9</li>
// </ul>

Пример

Давайте заполним таблицу tr-ками и td-шками:

<table id="table"></table>
let parent = document.querySelector('#parent');
for (let i = 1; i <= 3; i++) {
// создаем tr-ку
let tr = document.createElement('tr');
// Заполняем tr-ку td-шками:
for (let j = 1; j <= 3; j++) {
// создаем td-шку
let td = document.createElement('td');
// пишем в нее текст
td.innerHTML = j;
// добавляем созданную td-шку в конец tr-ки
tr.appendChild(td);
}
// добавляем созданную tr-ку в конец таблицы
table.appendChild(tr);
}
// <table id="table">
// <tr>
// <td>1</td>
// <td>2</td>
// <td>3</td>
// </tr>
// <tr>
// <td>1</td>
// <td>2</td>
// <td>3</td>
// </tr>
// <tr>
// <td>1</td>
// <td>2</td>
// <td>3</td>
// </tr>
// </table>