В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
js tag (56)
js (244)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (1)

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

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

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

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

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

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

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

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

    Что такое insertAdjacentHTML

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

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


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

    Для того, чтобы добавить данные перед тегом нам понадобится подопытный тег, лого содержания, чтобы можно было к нему обратиться к тегу , добавим ему 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>


  3. Добавляем данные перед тегом по клику -> 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

  4. Добавляем данные перед тегом по клику -> 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

  5. Добавляем содержимое перед тегом по клику -> 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


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

    Чтобы добавить данные перед уникальным тегом, его нужно создать - не важно как он будет называть, ну к примеру: 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
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.020803 секунд. Подробнее