Què fa el mètode insertAdjacentHTML() a JavaScript

Aquesta guia explica l'objectiu, el funcionament i l'ús del mètode 'insertAdjacent HTML()' a JavaScript.

Què fa el mètode 'insertAdjacentHTML()' a JavaScript?

El ' insertAdjacentHTML() ” El mètode ajuda els usuaris a inserir el codi HTML en una posició determinada.

Sintaxi

En la sintaxi anterior:

• element : representa l'element HTML associat.
• posició : Especifica les quatre posicions relatives d'un element HTML, de la següent manera:
• abans de començar : Abans de l'element HTML.
• després de començar : Just després del primer fill de l'element HTML.
• després del final : Al final de l'element HTML.
• abans del final : Després de l'últim fill de l'element HTML.
• html : Fa referència a l'element HTML inserit.

Exemple: aplicació de 'insertAdjacentHTML()' per inserir elements en posicions relatives
Aquest exemple aplica el mètode comentat per inserir els elements en les quatre posicions específiques respecte a un element concret, és a dir, '

”.

---





---

Codi HTML
Primer, aneu a través del següent codi HTML:

< h2 > insertAdjacentHTML() Mètode en JavaScript < / h2 >
< ul id = 'demo' >
< això > Linux < / això >
< / ul >

Al fragment de codi anterior:




• En primer lloc, creeu un subtítol amb el '

  ' etiqueta.

• A continuació, utilitzeu el '
  ” per crear la llista no ordenada amb un identificador assignat “demo”.
  • El ' L'etiqueta afegeix l'element indicat a la llista.

  Codi JavaScript
  Ara, passeu al bloc de codi JavaScript:

  < guió >
  deixar llista = document. getElementById ( 'demo' ) ;
  llista. inseriu HTML adjacent ( 'abans de començar' , '

  Sistemes operatius

  ' ) ;
  llista. inseriu HTML adjacent ( 'després de començar' , '
• Windows
' ) ;
llista. inseriu HTML adjacent ( 'abans' , '
• Mac OS
' ) ;
llista. inseriu HTML adjacent ( 'després' , '

Això és tot

' ) ;
guió >

Al fragment de codi anterior:

• Declarar una variable ' llista ' que utilitza el ' getElementById() ' mètode per obtenir el ' inclòs
  ' element que inclou l'identificador ' demostració ”.
  • A continuació, apliqueu el ' insertAdjacentHTML() ” per inserir el subtítol mitjançant l'etiqueta “

    ” abans de l'inici de “

    ”, és a dir, a l'etiqueta “ abans de començar ” posició.
    • Després d'això, inseriu l'element mitjançant el ' ” després de l'inici de l'etiqueta “
      ”, és a dir, a l'etiqueta “ després de començar ” posició.
      • De nou, utilitzeu el ' ' etiqueta per afegir un element de la llista abans del final de l'etiqueta '
        ', és a dir, a la ' abans del final ” posició.
        • Per últim, inseriu un paràgraf amb l'ajuda de l'etiqueta “

          ” després del final de l'etiqueta “

          ” a l'etiqueta “ després del final ” posició.

          Sortida
          

          Com s'ha vist, tots els elements HTML definits s'insereixen a la posició assignada amb l'ajuda del ' insertAdjacentHTML() ” mètode.

          Conclusió

          JavaScript proporciona una versió integrada de bona reputació insertAdjacentHTML() ” mètode per afegir l'element HTML en quatre posicions diferents. Indica al navegador que ajusti l'element HTML indicat a ' abans de començar ”, “ abans del final ”, “ després de començar ', i la ' després del final ” posicions respecte a un element concret. Aquesta guia va analitzar el funcionament i l'ús del mètode 'insertAdjacentHTML()' en detall.