Co robi metoda insertAdjacentHTML() w JavaScript

Ten przewodnik wyjaśnia cel, działanie i użycie metody „insertAdjacent HTML()” w JavaScript.

Co robi metoda „insertAdjacentHTML()” w JavaScript?

„ insertAdjacentHTML() ” pomaga użytkownikom wstawić kod HTML w określonej pozycji.

Składnia

W powyższej składni:

• element : Reprezentuje powiązany element HTML.
• pozycja : Określa cztery względne pozycje elementu HTML w następujący sposób:
• przed rozpoczęciem : Przed elementem HTML.
• po rozpoczęciu : zaraz po pierwszym dziecku elementu HTML.
• popołudniu : Na końcu elementu HTML.
• wcześniej : Po ostatnim potomku elementu HTML.
• HTML : Odnosi się do wstawionego elementu HTML.

Przykład: zastosowanie metody „insertAdjacentHTML()” do wstawiania elementów w położeniach względnych
Ten przykład dotyczy omówionej metody wstawiania elementów w czterech określonych pozycjach w odniesieniu do określonego elementu, tj. „

”.

---





---

Kod HTML
Najpierw przejrzyj następujący kod HTML:

< h2 > insertAdjacentHTML() Metoda w JavaScript < / h2 >
< ul ID = 'próbny' >
< To > Linuks < / To >
< / ul >

W powyższym fragmencie kodu:




• Najpierw utwórz podtytuł, używając „

  ”znacznik.

• Następnie użyj „
  ”, aby utworzyć listę nieuporządkowaną z przypisanym identyfikatorem „demo”.
  • „ Znacznik „ dodaje podany element na liście.

  Kod JavaScript
  Teraz przejdź do bloku kodu JavaScript:

  < scenariusz >
  niech lista = dokument. getElementById ( 'próbny' ) ;
  lista. wstawPrzylegającyHTML ( „przed rozpoczęciem” , „

  Systemy operacyjne

  ” ) ;
  lista. wstawPrzylegającyHTML ( „po rozpoczęciu” , „
• Windows
” ) ;
lista. wstawPrzylegającyHTML ( „przed” , „
• Mac OS
” ) ;
lista. wstawPrzylegającyHTML ( „popołudnie” , „

To wszystko

” ) ;
scenariusz >

W powyższym fragmencie kodu:

• Zadeklaruj zmienną „ lista ”, który wykorzystuje „ getElementById() ” metoda pobierania dołączonych „
  ”element składający się na id” próbny ”.
  • Następnie zastosuj „ insertAdjacentHTML() ”, aby wstawić podtytuł za pomocą znacznika „

    ” przed początkiem „

    ”, tj. przed rozpoczęciem ” pozycja.
    • Następnie włóż przedmiot za pomocą „ ” po początku tagu „
      ”, tj. po rozpoczęciu ” pozycja.
      • Ponownie użyj ” “ tag, aby dodać element listy przed końcem tagu “
        ”, tj. na “ wcześniej ” pozycja.
        • Na koniec wstaw akapit za pomocą znacznika „

          ” po końcu znacznika „

          ” w miejscu „ popołudniu ” pozycja.

          Wyjście
          

          Jak widać, wszystkie zdefiniowane elementy HTML są wstawiane na przypisane im pozycje za pomocą „ insertAdjacentHTML() ' metoda.

          Wniosek

          JavaScript zapewnia cieszącą się dobrą reputacją wbudowaną „ insertAdjacentHTML() ” do dołączania elementu HTML w czterech różnych pozycjach. Instruuje przeglądarkę, aby dostosowała określony element HTML w „ przed rozpoczęciem ”, „ wcześniej ”, „ po rozpoczęciu ”, oraz „ popołudniu ” pozycje w odniesieniu do określonego elementu. W tym przewodniku szczegółowo omówiono działanie i użycie metody „insertAdjacentHTML()”.