# Метод 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.textContent = '!'; 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.textContent = 'a'; let p2 = document.createElement('p'); p2.textContent = '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`,
  который вставляет теги в заданное место

←→
↑
en ru