# Метод append

Метод `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.textContent = '!'; 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.textContent = 'a'; let p2 = document.createElement('p'); p2.textContent = '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.textContent = 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('#table'); for (let i = 1; i <= 3; i++) { let tr = document.createElement('tr'); // создаем tr-ку // Заполняем tr-ку td-шками: for (let j = 1; j <= 3; j++) { let td = document.createElement('td'); // создаем td-шку td.textContent = j; // пишем в нее текст tr.append(td); // добавляем созданную td-шку в конец tr-ки } table.append(tr); // добавляем созданную 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>`

## Смотрите также

- метод `prepend`,
  который вставляет элементы в начало
- метод `appendChild`,
  который вставляет элементы в конец
- метод `insertBefore`,
  который вставляет элемент в перед элементом
- метод `insertAdjacentElement`,
  который вставляет элемент в заданное место
- метод `insertAdjacentHTML`,
  который вставляет теги в заданное место

← →
↑
en ru