DWWEB.RU
СКРИПТЫ

javascript как добавить объект перед другим объектом (insertAdjacentHTML)

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

  1. В данном конкретном случае объектом будет div, чтобы вы его увидели - поместим в него текст и вокруг поставим
    border:
  2. <div class="the_example" style="border: 1px solid black; ">Наш див</div>
    Результат:
    Наш объект
  3. Далее нам понадобится querySelector, можно использовать любую функцию, которая может обращаться к объекту! Например GetElementById
  4. querySelector - более универсальная, поэтому будем использовать её!

  5. Мы обратимся к классу the_example, который есть у нашего объекта таким образом:
  6. the_example = document.querySelector(".the_example");

  7. Нам понадобится метод insertAdjacentHTML и в первом параметре указываем куда - перед началом объекта => beforeBegin
  8. Во втором параметре будем использовать div с красным текстом:
    the_example.insertAdjacentHTML("beforeBegin", "<div style='color:red;'>Новый абзац</div>");
  9. Итого у нас получилось:
  10. <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 :

  11. Наш объект

  12. Если мы откроем код, то увидим результат добавления нашего объекта перед другим объектом через javascript
  13. <div style="color:red;">Новый абзац</div>

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

Не забудь !
Название скрипта :Как добавить див перед другим дивом js
Скрипт № 51.1
Скачать - архив
Все скрипты на одной странице
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
javascript как добавить объект перед другим объектом

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019