Метод prepend

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

Синтаксис

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

Пример

Давайте создадим абзац, установим ему текст и поместим на страницу в начало блока #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.prepend(p);

Результат выполнения кода:

<div id="parent">
	<p>!</p>
	<p>1</p>
	<p>2</p>
	<p>3</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.prepend(p1, p2);

Результат выполнения кода:

<div id="parent">
	<p>b</p>
	<p>a</p>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Пример

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

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

let parent = document.querySelector('#parent');
parent.prepend('!');

Результат выполнения кода:

<div id="parent">
	!
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

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

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