Como anexar o código HTML a um div usando JavaScript?
Neste artigo, vamos te contar
- Como anexar o código HTML a um div usando JavaScript?
- Como anexar o código HTML usando o Innerhtml?
- Como anexar o código HTML usando insertadjacenthtml?
Como anexar o código HTML a um div usando JavaScript?
Em JavaScript, existem duas maneiras de anexar o código HTML a uma div. Esses caminhos são os seguintes
- Anexar usando o Innerhtml
- Anexar usando insertadjacenthtml
Vamos tentar entender os dois métodos acima de anexar html a uma div em javascript com exemplos e explicações adequadas.
Como anexar o código HTML usando o Innerhtml?
A propriedade InnerHTML é usada para alterar o conteúdo dentro de uma Div ou qualquer tag html. Ele substitui totalmente o conteúdo da DIV existente pelo novo conteúdo, mas para usar esta propriedade, uma div deve ser atribuída com um único eu ia e ID deve sempre ser único.
Código:
Processo para anexar o código HTML usando JavaScript
Neste código, criamos um documento HTML simples com uma tag de cabeçalho e uma tag de div em vazio com um ID exclusivo verificar. Em seguida, usamos a propriedade JavaScript Innerhtml para anexar o código HTML dentro da div em vazio.
Saída:
A saída mostra claramente que anexamos html Tag com algum conteúdo e estilo dentro da tag Div vazia usando o INNERHTML ATRAVÉS JAVASCRIP.
Como anexar usando insertadjacenthtml?
Em JavaScript, Insertadjacenthtml é outro método usado para anexar o código HTML em uma div através do JavaScript. Este método leva 2 argumentos, o primeiro argumento especifica a posição do conteúdo em uma div e o segundo argumento é o código HTML real que você deseja anexar em uma div.
Este método usa quatro posições para anexar o conteúdo HTML em uma div:
- Antes de Begin
- antecipadamente
- Afterbegin
- depois
Vamos passar por todas essas posições uma a uma.
Antes de Begin
No código a seguir, este atributo colocará o código HTML antes do verificar id div.
Código:
Processo para anexar o código HTML usando JavaScript
Este parágrafo foi escrito para demonstrar o processo de anexar o código HTML em um div usando JavaScript.
Neste código, criamos um documento HTML simples com tag e a tendo identificação única verificar. Dentro desta div, um parágrafo é escrito usando . Agora nós anexamos html Saída: A saída mostra claramente que insertadjacenthtml Método Anexa o código HTML antes da DIV direcionada porque usamos seu atributo Antes do BEGIN para posicionar nosso código HTML anexado. antes Código: Este parágrafo foi escrito para demonstrar o processo de anexar o código HTML em um div usando JavaScript. Neste código, criamos um documento HTML simples com tag e a tendo identificação única verificar. Dentro desta div, um parágrafo é escrito usando . Agora nós anexamos html Saída: A saída mostra claramente que insertadjacenthtml Método anexa o código HTML após o Afterbegin Código: Este parágrafo foi escrito para demonstrar o processo de anexar o código HTML em um div usando JavaScript. Neste código, criamos um documento HTML simples com tag e a tendo identificação única verificar. Dentro desta div, um parágrafo é escrito usando . Agora nós anexamos html Saída: A saída mostra claramente que insertadjacenthtml Método anexa o código HTML dentro da div, é alvo, mas pouco antes do depois Código: Este parágrafo foi escrito para demonstrar o processo de anexar o código HTML em um div usando JavaScript. Neste código, criamos um documento HTML simples com tag e a tendo um ID único verificar. Dentro desta div, um parágrafo é escrito usando . Agora nós anexamos html Saída: A saída mostra claramente que insertadjacenthtml Método Anexa o código HTML após a Div -alvo porque usamos seu atributo Afterend para posicionar nosso código HTML anexado. Conclusão Em JavaScript, podemos anexar o código HTML a um div usando Innerhtml e insertadjacenthtml. O INNERHTML anexa o código HTML substituindo o conteúdo atual em uma div por um novo conteúdo, enquanto o insertadjacenthtml anexa o código HTML por posicionamento, usando antes de BEGIN, Afterbegin, AfterEnd e Afterend Atributos. Neste artigo, aprendemos sobre o processo de anexar o código HTML a um div usando JavaScript.
No código a seguir, este atributo colocará o código HTML dentro do verificar id div, mas depois do Processo para anexar o código HTML usando JavaScript
No código a seguir, este atributo colocará o código HTML dentro do verificar id div, mas pouco antes do Processo para anexar o código HTML usando JavaScript
No código a seguir, este atributo colocará o código HTML após o verificar id div.Processo para anexar o código HTML usando JavaScript