O que o método insertAdjacentHTML () faz em JavaScript

Este guia explica o objetivo, o funcionamento e o uso do método “insertAdjacent HTML()” em JavaScript.

O que o método “insertAdjacentHTML ()” faz em JavaScript?

O ' insertAdjacentHTML() ” ajuda os usuários a inserir o código HTML em uma posição específica.

Sintaxe

Na sintaxe acima:

• elemento : Representa o elemento HTML associado.
• posição : Especifica as quatro posições relativas de um elemento HTML, como segue:
• antes de começar : Antes do elemento HTML.
• depois de começar : Logo após o primeiro filho do elemento HTML.
• depois de terminar : No final do elemento HTML.
• antes de terminar : após o último filho do elemento HTML.
• html : Refere-se ao elemento HTML inserido.

Exemplo: aplicando o “insertAdjacentHTML()” para inserir elementos em posições relativas
Este exemplo aplica o método discutido para inserir os elementos nas quatro posições específicas em relação a um elemento específico, ou seja, “

”.

---





---

Código HTML
Primeiro, passe pelo seguinte código HTML:

< h2 > Método insertAdjacentHTML () em JavaScript < / h2 >
< ul eu ia = 'demonstração' >
< que > Linux < / que >
< / ul >

No trecho de código acima:




• Em primeiro lugar, crie um subtítulo usando o “

  ' marcação.

• Em seguida, utilize o “
  ” para criar a lista não ordenada com um ID atribuído “demo”.
  • O ' “ marca adiciona o item indicado na lista.

  Código JavaScript
  Agora, vá para o bloco de código JavaScript:

  < roteiro >
  vamos listar = documento. getElementById ( 'demonstração' ) ;
  lista. insertAdjacentHTML ( 'antes de começar' , '

  Sistemas Operacionais

  ' ) ;
  lista. insertAdjacentHTML ( 'depois de começar' , '
• Windows
' ) ;
lista. insertAdjacentHTML ( 'antes' , '
• Mac OS
' ) ;
lista. insertAdjacentHTML ( 'depois' , '

Isso é tudo

' ) ;
roteiro >

No trecho de código acima:

• Declare uma variável “ lista ” que utiliza o “ getElementById() ” método para buscar o incluído “
  ” elemento que compreende o id “ demonstração ”.
  • Em seguida, aplique o “ insertAdjacentHTML() ” para inserir o subtítulo através da tag “

    ” antes do início do “

    ” ou seja, no “ antes de começar ” posição.
    • Depois disso, insira o item através do botão “ ” após o início da tag “
      ” ou seja, no “ depois de começar ” posição.
      • Mais uma vez, use o ” “ para adicionar um item de lista antes do final da tag “
        ” ou seja, no “ antes de terminar ” posição.
        • Por fim, insira um parágrafo com a ajuda da tag “

          ” após o final da tag “

          ” no “ depois de terminar ” posição.

          Saída
          

          Como visto, todos os elementos HTML definidos são inseridos em sua posição atribuída com a ajuda do “ insertAdjacentHTML() ” método.

          Conclusão

          JavaScript fornece um built-in de boa reputação “ insertAdjacentHTML() ” para anexar o elemento HTML em quatro posições diferentes. Ele instrui o navegador a ajustar o elemento HTML declarado em “ antes de começar ”, “ antes de terminar ”, “ depois de começar ', e a ' depois de terminar ” posições em relação a um determinado elemento. Este guia discutiu o funcionamento e o uso do método “insertAdjacentHTML()” em detalhes.