Метод 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.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++) {
		let td = document.createElement('td'); // создаем td-шку
		td.innerHTML = 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,
который вставляет теги в заданное место