Cosa fa il metodo insertAdjacentHTML() in JavaScript

Questa guida spiega l'obiettivo, il funzionamento e l'utilizzo del metodo 'insertAdjacent HTML()' in JavaScript.

Cosa fa il metodo 'insertAdjacentHTML ()' in JavaScript?

IL ' insertAdiacenteHTML() Il metodo 'aiuta gli utenti a inserire il codice HTML in una posizione particolare.

Sintassi

Nella sintassi precedente:

• elemento : Rappresenta l'elemento HTML associato.
• posizione : Specifica le quattro posizioni relative di un elemento HTML, come segue:
• prima di iniziare : prima dell'elemento HTML.
• dopoinizio : Subito dopo il primo figlio dell'elemento HTML.
• post-fine : alla fine dell'elemento HTML.
• prima della fine : Dopo l'ultimo figlio dell'elemento HTML.
• html : Si riferisce all'elemento HTML inserito.

Esempio: applicazione di 'insertAdjacentHTML()' per inserire elementi in posizioni relative
Questo esempio applica il metodo discusso per inserire gli elementi nelle quattro posizioni specifiche rispetto a un particolare elemento, ad esempio '

”.

---





---

Codice HTML
Innanzitutto, passa attraverso il seguente codice HTML:

< h2 > insertAdjacentHTML() metodo in JavaScript < / h2 >
< Ul id = 'demo' >
< Quello > Linux < / Quello >
< / Ul >

Nello snippet di codice sopra:




• Innanzitutto, crea un sottotitolo utilizzando il '

  etichetta '.

• Successivamente, utilizza il '
  ” per creare l'elenco non ordinato con un id assegnato “demo”.
  • IL ' Il tag ' aggiunge l'elemento indicato nell'elenco.

  codice javascript
  Ora, passa al blocco di codice JavaScript:

  < copione >
  lascia lista = documento. getElementById ( 'demo' ) ;
  elenco. insertAdjacentHTML ( 'prima di iniziare' , '

  Sistemi operativi

  ' ) ;
  elenco. insertAdjacentHTML ( 'dopo l'inizio' , '
• Finestre
' ) ;
elenco. insertAdjacentHTML ( 'prima della fine' , '
• Mac OS
' ) ;
elenco. insertAdjacentHTML ( 'post-fine' , '

Questo è tutto

' ) ;
copione >

Nello snippet di codice sopra:

• Dichiara una variabile ' elenco ” che utilizza il “ getElementById() ” metodo per recuperare l'incluso “
  ” elemento che comprende l'id “ dimostrazione ”.
  • Successivamente, applica il ' insertAdiacenteHTML() ” per inserire il sottotitolo tramite il tag “

    ” prima dell'inizio di “

    ” cioè, al punto “ prima di iniziare posizione.
    • Successivamente, inserisci l'elemento tramite il ' ” dopo l'inizio del tag “
      ” cioè, al “ dopoinizio posizione.
      • Ancora una volta, usa il ' ' tag per aggiungere un elemento dell'elenco prima della fine del tag '
        ', ad es. prima della fine posizione.
        • Infine, inserisci un paragrafo con l'aiuto del tag “

          ” dopo la fine del tag “

          ” al “ post-fine posizione.

          Produzione
          

          Come visto, tutti gli elementi HTML definiti vengono inseriti nella loro posizione assegnata con l'aiuto del ' insertAdiacenteHTML() ' metodo.

          Conclusione

          JavaScript fornisce un ben noto built-in ' insertAdiacenteHTML() ” metodo per aggiungere l'elemento HTML in quattro diverse posizioni. Indica al browser di modificare l'elemento HTML dichiarato in ' prima di iniziare ”, “ prima della fine ”, “ dopoinizio ', e il ' post-fine ” posizioni rispetto a un particolare elemento. Questa guida ha discusso in dettaglio il funzionamento e l'uso del metodo 'insertAdjacentHTML()'.