Escrever o código HTML é fácil, mas quando se trata de alterações dinâmicas nas páginas como anexar HTML, você precisa usar estratégias incomuns. JavaScript é uma linguagem poderosa para fazer esses tipos de empregos. Você pode usar facilmente JavaScript para colocar o código HTML dentro do modelo. Vamos discutir isso neste artigo.

Através do JavaScript, existem duas maneiras de anexar o código HTML a uma tag div.

• Usando a propriedade InnerHTML
• Inserindo html adjacente usando a função insertadjacenthtml ()

Usando o atributo innerhtml

Para usar a propriedade Innerhtml para anexar o código a um elemento (div), primeiro escolha o elemento (div), onde deseja anexar o código. Em seguida, usando o operador += no InnerHTML, adicione o código embrulhado como strings.

Aqui está a sintaxe do atributo.

HTMLELEMENT.INNERHTML += "Insira seu código aqui"

Vamos dar um exemplo disso. Primeiro, vamos nos referir ao elemento HTML usando a propriedade:

documento.getElementById ();

Portanto, vamos criar um <div> e coloque um <H1> tag e a <Botão> dentro dele.

Este é um tutorial Linuxhint

Anexar o parágrafo

Como você pode ver, demos um id de "teste" ao div Marque e colocou o texto que diz "Anexar o parágrafo" dentro do botão. Com isso, temos o seguinte resultado na tela

Código JavaScript:

Temos um botão vinculado a uma função chamada "ButtonPressed ()" no script. Mas, não definimos esta função, e este botão não faz nada. Então, vamos criar essa função no script que acrescentaria um parágrafo nesta div e contar quantas vezes adicionamos este parágrafo. Dê uma olhada no seguinte código.

i = 1;
const ButtonPressed = () =>
documento.getElementById ("teste").inerhtml +=
"

Yoo anexar este parágrafo " + i +" vezes ";
i ++;

Nota: Criamos uma variável de contador "eu". Isso será usado para manter uma verificação de quantas vezes nós anexamos este parágrafo dentro da tag div.

Agora, se executarmos o código e pressionarmos o botão que obtemos:

Observação: Essa técnica remove essencialmente todo o conteúdo da div e a substitui por coisas novas. Quaisquer ouvintes vinculados aos nós filhos daquela Div serão perdidos como resultado. É por isso que sempre concatamos.

Usando o método adjacenthtml

A função insertadjacenthtml () também pode ser usada para anexar o código HTML a uma div. Este método é útil quando se trata de anexar HTML em algum lugar específico. Então, são necessários dois parâmetros neste método:

• O local (no documento) em que o código deve ser inserido ('Afterbegin', 'antes de Begin', 'Afterend', 'Antendernd').
  • Afterbegin - logo após o elemento HTML mencionado, mas dentro da tag.
  • Antes de BEGIN - Antes do elemento HTML mencionado
  • Afterend - Após a etiqueta de fechamento do elemento HTML
  • Antes - dentro do elemento HTML, mas antes da etiqueta de fechamento
• Você deve cercar o código HTML que deseja adicionar, dentro das citações.

Esta é a sintaxe geral do método

HTMLELEMENT.insertadjacenthtml ('LOCALIZAÇÃO', 'CÓDIGO HTML');

Vamos usar o exemplo anterior. O mesmo código HTML. No entanto, desta vez o script seria um pouco diferente, pois:

Código HTML:

Este é um tutorial Linuxhint

Anexar o parágrafo

Nota: Como estamos usando o exemplo anterior, o código HTML é exatamente o mesmo.

Código JavaScript:

i = 1;
função buttonpressed ()
documento.getElementById ("teste").insertadjacenthtml ("antes deBegin",
"

Anexado " + i +" vezes antes da div

");
i ++;

Nota: estamos usando o “Antes de Begin”Propriedade para anexar o

tag antes do início do div.

Saída:

É isso, você aprendeu como podemos anexar algum código HTML através do JavaScript.

Conclusão

Existem dois métodos que você pode usar para anexar o código HTML em uma página da web. O primeiro método é usando Innerhtml Enquanto o segundo método é usando o Adjacentehtml método. Neste artigo, fizemos exemplos dos métodos InnerHTML e Adjacenthtml para anexar o código HTML em uma página da web.