Inserção de JavaScriptAdjacentHTML – Acervo Lima Tutorials

Resumo : neste tutorial você aprenderá como utilizar o insertAdjacentHTML()método para inserir HTML no documento.

Introdução ao método JavaScript insertAdjacentHTML()

O insertAdjacentHTML()é um método da Elementinterface para que você possa invocá-la a partir de qualquer elemento.

O insertAdjacentHTML()método analisa um trecho de texto HTML e insere os nós resultantes na árvore DOM em uma posição especificada:

element.insertAdjacentHTML(positionName, text);Linguagem de código:  JavaScript  ( javascript )

O insertAdjacentHTML()método possui dois parâmetros:

1) posição

The positionNameé uma string que representa a posição relativa ao elemento. O positionNameaceita um dos quatro valores a seguir:

'beforebegin': antes do elemento
'afterbegin': antes de seu primeiro filho do elemento.
'beforeend': após o último filho do elemento
'afterend': depois do elemento

Observe que 'beforebegin'e 'afterend'só são relevantes se o elemento estiver na árvore DOM e tiver um elemento pai.

O insertAdjacentHTML()método não tem valor de retorno ou undefinedpor padrão.

A visualização a seguir ilustra o nome da posição:

2) texto

O textparâmetro é uma string que o insertAdjacentHTML()método analisa como HTML ou XML. Não podem ser Nodeobjetos

Consideração de segurança

Assim como o innerHTML, se você usar a entrada do usuário para passar para o insertAdjacentHTML()método, você deve sempre escapar dela para evitar riscos à segurança.

Exemplo do método JavaScript insertAdjacentHTML()

O exemplo de JavaScript a seguir usa o insertAdjacentHTML()método para inserir vários elementos na página com as posições relativas ao ulelemento:

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>insertAdjacentHTML() Demo</title>
 </head>
 <body>
     <ul id="list">
         <li>CSS</li>
     </ul>

     <script>
         let list = document.querySelector('#list');

         list.insertAdjacentHTML('beforebegin', '<h2>Web Technology</h2>');
         list.insertAdjacentHTML('afterbegin', '<li>HTML</li>');
         list.insertAdjacentHTML('beforeend', '<li>JavaScript</li>');
         list.insertAdjacentHTML('afterend', '<p>For frontend developers</p>');
     </script>
 </body>
 </html>Linguagem de código:  HTML, XML  ( xml )

Como funciona:

Primeiro, selecione o ulelemento pelo seu id listusando o querySelector()método.
A seguir, use o insertAdjacentHTML()método para inserir um elemento de título 2 antes do ulelemento. A posição é 'beforebegin'.
Em seguida, use o insertAdjacentHTML()método para inserir um novo elemento de item de lista antes do primeiro filho do elemento ul. A posição é 'afterbegin'.
Depois disso, use o insertAdjacentHTML()método para inserir um novo elemento de item de lista após o último filho do elemento ul com a posição 'beforeend'.
Finalmente, insert use o insertAdjacentHTML()método para inserir um novo elemento de parágrafo após o elemento ul com a posição 'afterend'.

Resumo

Use o insertAdjacentHTML()método para inserir um texto como nós na árvore DOM em uma posição especificada.
Sempre escape do texto de entrada do usuário que você passa para o insertAdjacentHTML()método para evitar riscos à segurança.

JavaScript depois()

Substituição de JavaScriptChild