Метод append в JavaScript

Метод append позволяет вставить в конец какого-либо элемента другой элемент. Параметром метод принимает элемент, как правило созданный через createElement, либо строку. Можно добавить сразу несколько элементов или строк, перечислив их через запятую.

Синтаксис

родитель.append(элемент или строка)

Пример

Давайте создадим абзац, установим ему текст и поместим на страницу в конец блока #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.append(p);
// <div id="parent">
// <p>1</p>
// <p>2</p>
// <p>3</p>
// <p>!</p>
// </div>

Пример

Поместим сразу несколько абзацев в конец блока #parent:

<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p1 = document.createElement('p');
p1.innerHTML = 'a';
let p2 = document.createElement('p');
p2.innerHTML = 'b';
parent.append(p1, p2);
// <div id="parent">
// <p>1</p>
// <p>2</p>
// <p>3</p>
// <p>a</p>
// <p>b</p>
// </div>

Пример

Давайте в качестве параметра метода используем строку:

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