Javascript добавляем содержание перед другим элементом (insertAdjacentHTML)

Как добавлять данные(содержание любое) перед другим тегом через javascript. Здесь тег - это может быть все, что угодно! Это может быть div, блок, текст, картинка. Но обращаться мы будем к элементу на странице!

И чтобы вы не запутались, где это находится... перед тегом, сделаем наглядную иллюстрацию:

Как добавить содержимое перед тегом!?

1. Как добавить данные перед тегом
2. Добавить данные перед тегом после загрузки
3. Добавляем данные перед тегом по клику -> id
4. Добавляем данные перед тегом по клику -> id + getelementbyid
5. Добавляем содержимое перед тегом по клику -> name + getElementsByName
6. Добавляем содержимое перед уникальным тегом по клику
7. Скачать

Как добавить данные перед тегом

Для добавления содержания, данных(любых) перед тегом нам потребуется метод, мультиставка insertAdjacentHTML() со значением beforeBegin

Что такое insertAdjacentHTML

insertAdjacentHTML() разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию.

Если вам требуется добавлять данные , в данном случае перед тегом, то этот метод нам как раз и нужен! Давайте разберем пример, поскольку только на примере будет явственно видно, как работает вставка содержимого (данных)




Добавить данные перед тегом после загрузки

Для того, чтобы добавить данные перед тегом нам понадобится подопытный тег, лого содержания, чтобы можно было к нему обратиться к тегу , добавим ему border, чтобы мы могли его увидеть!

<div class="the_example" style="border: 1px solid black; ">Наш див</div>

Выведем наш тег, перед которым будем вставлять данные:

Наш тег

Далее нам понадобится querySelector, либо любую другую функцию/метод с помощью которой мы можем обратиться к тегу

Мы обратимся(как пример) к классу the_example, который есть у нашего объекта таким образом:

the_example = document.querySelector(".the_example");

Нам понадобится метод insertAdjacentHTML и в первом параметре указываем куда - перед началом объекта => beforeBegin

Во втором параметре будем использовать div с красным текстом:

the_example.insertAdjacentHTML("beforeBegin", "<div style='color:red;'>Новый абзац</div>");

Соберем весь код вместе:

<div class="the_example" style="border: 1px solid black;">Наш объект</div>

<script> the_example = document.querySelector(".the_example");

the_example.insertAdjacentHTML("beforeBegin", "<div style=\"color:red;\">Новый абзац</div>"); </script>

Результат добавления данных перед тегом javascript :

Наш тег


Если мы откроем код, то увидим результат добавления нашего объекта перед другим тегом через javascript

<div style="color:red;">Новый абзац</div>

<div class="the_example" style="border: 1px solid black;">Наш объект</div>




Добавляем данные перед тегом по клику -> id

Для того, чтобы продемонстрировать добавление данных перед тегом нам понадобится, опять, подопытный тег, в который добавим id="the_id", бордюр также оставим, чтобы наш тег можно было видеть :

<div id="the_id" style="border: 1px solid black;">Наш тег с id</div>

Нам понадобится кнопка button:

<button id="id_button">button</button>

И + скрипт с onclick который обработает нажатие и добавление содержимого перед тегом

<script>
id_button.onclick = function()
{
the_id.insertAdjacentHTML("beforeBegin", "<div style=\"color:red;\">Новый абзац</div>");
}
</script>


Теперь остается собрать данный код и вывести его прямо здесь:

Результат добавления данных перед тегом по id

Чтобы получить результат -> добавить данные пред тегом - просто нажмите на кнопку!

Наш тег с id
Добавьте данные перед тегом



Добавляем данные перед тегом по клику -> id + getelementbyid

Использование getelementbyid для добавления данных перед тегом - это вариация на тему предыдущего пункта! Где мы не использовали этот метод!

Чем два примера добавления данных отличаются между собой этот и верхний!? Наличием пред id - getElementById

Думаю, что нет никакого смысла повторять предыдущий пункт, поэтому просто выведем код сразу:

<div id="the_id_1" style="border: 1px solid black;">Наш тег с id</div>

<button id="id_button_1">Добавьте данные перед тегом getelementbyid</button>

<script>

document.getElementById("id_button_1").onclick = function()

{

document.getElementById("the_id_1").insertAdjacentHTML("beforeBegin", "<div style=\"color:red;\">Добавим новый абзац id + getElementById</div>");

}

</script>

Результат добавления данных перед тегом с использованием getelementbyid

Для того, чтобы добавить данные перед тегом нажмите на кнопку!

Наш тег с id
Добавьте данные перед тегом getelementbyid



Добавляем содержимое перед тегом по клику -> name + getElementsByName

Далее предположим, что у нас есть тег, поле ввода textarea и нам нужно перед данным тегом вставить какие-то данные! Поступаем как под копирку!

Берем верхний код, изменяем id, в качестве тега, перед которым будем добавлять новое содержание, будет выступать textarea с именем name="textarea_name"

Единственное отличие, что getElementsByName получает массив, поэтому ставим атрибут массива квадратные скобки с числом 0

<textarea name="textarea_name">Здесь тег textarea с name = textarea_name</textarea>

<button id="id_button_2">Добавьте данные перед тегом getElementsByName</button>

<script>

id_button_2.onclick = function()

{

document.getElementsByName("textarea_name")[0].insertAdjacentHTML("beforeBegin", "<div style=\"color:red;\">Добавим абзац с помощью getElementsByName</div>");

}

</script>

Результат добавления новых данных перед тегом с помощью getElementsByName

Здесь тег textarea с name = textarea_name Добавьте данные перед тегом getElementsByName



Добавляем содержимое перед уникальным тегом по клику

Чтобы добавить данные перед уникальным тегом, его нужно создать - не важно как он будет называть, ну к примеру: blackblock и как вы уже наверное догадались, чтобы добавить данные, нам нужен верхний код, модифицируем его , под наши нужды!

Чтобы получить данные уникального тега обратимся к нему с помощью querySelector:

<blackblock>Уникальный тег blackblock</blackblock>

<button id="id_button_3" class="width_100 padding_10_0 margin_10_0">Добавьте данные перед уникальным тегом blackblock</button>

<script>

id_button_3.onclick = function()

{

document.querySelector("blackblock").insertAdjacentHTML("beforeBegin", "<div style=\"color:red;\">Новый абзац</div>");

}

</script>

Результат добавления данный перед уникальным тегом по клику

Уникальный тег blackblock Добавьте данные перед уникальным тегом blackblock