DWWEB.RU
СКРИПТЫ

javascript как добавить объект во внутрь другого объекта перед содержимым

Довольно длинное название получилось - как добавить объект во внутрь другого объекта перед содержимым javascript !? Для того, чтобы сразу стало ясно о чем идет речь мы нарисовали меленькую схему, в котро й и расскажем первое предложение! Как видите есть тег в треугольных скобках, есть конец тега, и между началом тега и концом тега - есть некое содержимое - нам требуется перед этим содержимым и поставить некий другой объект, тег, текст!

javascript как добавить объект во внутрь другого объекта перед содержимым Мы в прошлый раз добавляли до тега, потом после тега и вот сейчас добавим содержимое во внутрь тега перед содержимым!
Погнали!
  1. Нам опять потребуется подопытный блок, ну например со своим тегом...
  2. <example style="border: 1px solid red;display: block;">Наш блок example</example>
  3. Нам нужна функция, которая сможет обратиться к нашему диву, объекту, тегу - будем использовать querySelector
  4. у нас должна получиться вот такая конструкция:
    example = document.querySelector('example') ;

    Как видим ничего не изменилось по отношению предыдущих двух страниц!

  5. Еще нам нужен метод insertAdjacentHTML, но теперь уже с новым параметром
  6. afterBegin и вторым параметром устанавливаем наше содержимое, которое нам требуется добавить перед другим содержимым в теге!
    example .insertAdjacentHTML('afterBegin', '<div style="color:red;">Новый абзац</div>');
  7. Теперь все соберем вместе и унас получится:
  8. <example style="border: 1px solid red;display: block;">Наш блок example</example>
    <script> example = document.querySelector('example') ;example .insertAdjacentHTML('afterBegin', '<div style="color:red; border: 1px solid black;">Новый абзац</div>');</script>

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

    Чтобы вы все могли понять, то в добавляемый див добавили бордюр черного цвета:

Наш блок example

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

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

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

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