В этом руководстве объясняется назначение, работа и использование метода «insertAdjacent HTML()» в JavaScript.
Что делает метод «insertAdjacentHTML()» в JavaScript?
“ вставить соседнийHTML() ” помогает пользователям вставлять HTML-код в определенную позицию.
Синтаксис
элемент. вставкаAdjacentHTML ( позиция , HTML )
В приведенном выше синтаксисе:
- элемент : представляет связанный элемент HTML.
- позиция : он определяет четыре относительных положения элемента HTML следующим образом:
- перед началом : перед элементом HTML.
- после начала : Сразу после первого дочернего элемента HTML.
- конец : В конце элемента HTML.
- заранее : после последнего дочернего элемента HTML.
- HTML : относится к вставленному элементу HTML.
Пример: применение «insertAdjacentHTML()» для вставки элементов в относительных позициях
В этом примере применяется обсуждаемый метод для вставки элементов в четыре определенных положения по отношению к конкретному элементу, т. е. « <ул> ».
HTML-код
Сначала просмотрите следующий HTML-код:
< ул идентификатор '=' 'демо' >
< что > линукс < / что >
< / ул >
В приведенном выше фрагменте кода:
- Во-первых, создайте подзаголовок, используя « ' ярлык.
- Далее используйте « <ул> », чтобы создать неупорядоченный список с назначенным идентификатором «demo».
- “ <это> Тег добавляет указанный элемент в список.
JavaScript-код
Теперь перейдем к блоку кода JavaScript:
пусть список '=' документ. получитьэлементбиид ( 'демо' ) ;
список. вставкаAdjacentHTML ( 'прежде чем начать' , '
Операционные системы
' ) ;список. вставкаAdjacentHTML ( 'после начала' , '
список. вставкаAdjacentHTML ( 'до конца' , '
список. вставкаAdjacentHTML ( 'после окончания' , '
Это все
' ) ;сценарий >
В приведенном выше фрагменте кода:
- Объявить переменную ' список », который использует « получитьэлемент по идентификатору() ” для извлечения включенного “ <ул> ” элемент, содержащий идентификатор “ демо ».
- Далее примените « вставить соседнийHTML() », чтобы вставить подзаголовок через тег «
» перед началом «
- », т. е. в « перед началом ' позиция.
- После этого вставьте пункт через « <это> » после начала тега «
- », т. е. в месте « после начала ' позиция.
- Опять же, используйте ” <это> ', чтобы добавить элемент списка перед концом тега '
- ', т. е. в ' заранее ' позиция.
- Наконец, вставьте абзац с помощью тега «
» после окончания тега «
- » в « конец ' позиция.
Выход
Как видно, все определенные элементы HTML вставляются в назначенную им позицию с помощью « вставить соседнийHTML() метод.
Заключение
JavaScript предоставляет хорошо зарекомендовавший себя встроенный « вставить соседнийHTML() » для добавления HTML-элемента в четыре разные позиции. Он указывает браузеру настроить указанный элемент HTML в « перед началом », « заранее », « после начала ', и ' конец позиции по отношению к определенному элементу. В этом руководстве подробно рассматривается работа и использование метода «insertAdjacentHTML()».