Wat doet de methode insertAdjacentHTML() in JavaScript

Deze gids legt het doel, de werking en het gebruik uit van de methode 'insertAdjacent HTML()' in JavaScript.

Wat doet de 'insertAdjacentHTML()'-methode in JavaScript?

De ' insertAangrenzendeHTML() ”methode helpt de gebruikers om de HTML-code in een bepaalde positie in te voegen.

Syntaxis

In de bovenstaande syntaxis:

• element : Het vertegenwoordigt het bijbehorende HTML-element.
• positie : Het specificeert de vier relatieve posities van een HTML-element, als volgt:
• voorbegin : Voor het HTML-element.
• nabegin : Direct na het eerste kind van het HTML-element.
• daarna : Aan het einde van het HTML-element.
• vooreinde : Na het laatste kind van het HTML-element.
• html : Het verwijst naar het ingevoegde HTML-element.

Voorbeeld: de 'insertAdjacentHTML()' toepassen om elementen op relatieve posities in te voegen
Dit voorbeeld past de besproken methode toe om de elementen in te voegen op de vier specifieke posities met betrekking tot een bepaald element, d.w.z. '

”.

---





---

HTML code
Ga eerst door de volgende HTML-code:

< h2 > insertAdjacentHTML()-methode in JavaScript < / h2 >
< ul ID kaart = 'demonstratie' >
< Dat > Linux < / Dat >
< / ul >

In het bovenstaande codefragment:




• Maak eerst een subkop met de '

  ' label.

• Gebruik vervolgens de '
  '-tag om de ongeordende lijst te maken met een toegewezen id 'demo'.
  • De ' “ tag telt het vermelde item in de lijst op.

  JavaScript-code
  Ga nu verder met het JavaScript-codeblok:

  < script >
  laat lijst = document. getElementById ( 'demonstratie' ) ;
  lijst. insertAangrenzendeHTML ( 'voor het begin' , '

  Besturingssystemen

  ' ) ;
  lijst. insertAangrenzendeHTML ( 'nabegin' , '
• Vensters
' ) ;
lijst. insertAangrenzendeHTML ( 'vooreind' , '
• Mac OS
' ) ;
lijst. insertAangrenzendeHTML ( 'na afloop' , '

Dat is alles

' ) ;
script >

In het bovenstaande codefragment:

• Declareer een variabele ' lijst ” dat gebruik maakt van de “ getElementById() ” Methode om het meegeleverde op te halen '
  ” element waaruit de id bestaat “ demo ”.
  • Pas vervolgens de ' insertAangrenzendeHTML() '-methode om de subkop in te voegen via de tag '

    ' vóór het begin van de '

    ', d.w.z. aan de ' voorbegin ' positie.
    • Voeg daarna het item in via de ' '-tag na het begin van de '
      '-tag, d.w.z. aan de ' nabegin ' positie.
      • Gebruik opnieuw de ' ' tag om een ​​lijstitem toe te voegen voor het einde van de '
        ' tag, d.w.z. aan de ' vooreinde ' positie.
        • Voeg ten slotte een alinea in met behulp van de '

          '-tag na het einde van de '

          '-tag bij de ' daarna ' positie.

          Uitgang
          

          Zoals te zien zijn, worden alle gedefinieerde HTML-elementen op hun toegewezen positie ingevoegd met behulp van de ' insertAangrenzendeHTML() ” methode.

          Conclusie

          JavaScript biedt een gerenommeerde ingebouwde ' insertAangrenzendeHTML() ” methode voor het toevoegen van het HTML-element op vier verschillende posities. Het instrueert de browser om het vermelde HTML-element aan te passen bij ' voorbegin ”, “ vooreinde ”, “ nabegin ', en de ' daarna ” posities met betrekking tot een bepaald element. In deze handleiding is de werking en het gebruik van de methode “insertAdjacentHTML()” uitvoerig besproken.