Este tutorial descreverá os métodos para escrever código HTML dinamicamente usando JavaScript.
Como escrever código HTML dinamicamente usando JavaScript?
Para escrever código HTML usando JavaScript, use os seguintes métodos:
Método 1: Escrever código HTML dinamicamente usando o método document.createElement()
do JavaScript “ document.createElement() ” método com o “ conteúdo de texto ” é usada para escrever um código HTML em JavaScript dinamicamente. Usando o método createElement(), você pode criar um determinado elemento HTML e a propriedade textContent é usada para definir o conteúdo do texto.
Sintaxe
Use a sintaxe fornecida para criar um elemento HTML em JavaScript:
documento. criarElemento ( 'tagName' )
Exemplo
Aqui, primeiro, criaremos um parágrafo em um arquivo JavaScript usando a tag HTML
passada em um “ criarElemento() ” método:
const texto = documento. criarElemento ( 'p' ) ;Use a propriedade textContent para definir o texto em um parágrafo:
texto. conteúdo de texto = 'Bem-vindo ao Linuxhint' ;
Por fim, imprima o texto na página da Web usando o botão “ document.write() ” método:
documento. Escreva ( texto. conteúdo de texto ) ;Aqui, você pode ver na saída que escrevemos com sucesso o texto na página da web usando JavaScript:
Método 2: Escrever código HTML dinamicamente usando a propriedade innerHTML
Para escrever código HTML dinamicamente, use o JavaScript “ HTML interno ' propriedade. É a abordagem mais simples para alterar o conteúdo de um elemento HTML. Ele suporta todos os navegadores.
Sintaxe
Siga a sintaxe fornecida para usar a propriedade innerHTML:
HTML interno = 'texto'Exemplo
No arquivo HTML, primeiro crie um botão que chamará a função definida “ cabeçalho() ” em JavaScript no evento click:
< botão ao clicar = 'cabeçalho()' > Clique aqui botão >Crie um parágrafo usando a tag
onde será mostrado o texto do JavaScript e atribua um id a ele:
< p id = 'cabeçalho' > p >Defina uma função “ cabeçalho() ” em um arquivo JavaScript. Obtenha a referência do elemento HTML usando seu id atribuído com a ajuda do “ getElementById() ” método e aplicar um “ HTML interno ” propriedade nele:
título de função ( ) {documento. getElementById ( 'cabeçalho' ) . HTML interno = '
Bem-vindo ao Linuxhint
' ;}
Saída
Compilamos todas as informações essenciais relacionadas à escrita do código HTML dinamicamente usando JavaScript.
Conclusão
Para escrever código HTML dinamicamente em JavaScript, use o comando “ document.createElement() ” método com o “ conteúdo de texto ” propriedade ou o “ HTML interno ' propriedade. No primeiro método, você não precisa de nenhum código HTML, enquanto na propriedade innerHTML, você precisa acessar o elemento HTML e realizar uma operação nele. Neste tutorial, descrevemos os métodos para escrever código HTML usando JavaScript dinamicamente.