Como você sabe, JavaScript é uma linguagem de script dinâmica. Para fornecer funcionalidade dinâmica às páginas da web, o código HTML pode ser escrito usando elementos HTML no JavaScript, e os atributos CSS podem ser utilizados em combinação com elementos HTML no JavaScript para personalizar sua página da web. JavaScript "createElement ()”O método permite criar elementos HTML e o“Innerhtml”Propriedade permite escrever conteúdo para páginas da web.

Este tutorial descreverá os métodos para escrever código HTML dinamicamente usando JavaScript.

Como escrever o código HTML dinamicamente usando JavaScript?

Para escrever código HTML usando JavaScript, use os seguintes métodos:

• Usando o documento.Método CreateElement ()
• Propriedade Innerhtml

Método 1: Escreva o código HTML dinamicamente usando o documento.Método CreateElement ()

JavaScript "documento.createElement ()”Método com o“TextContent”A propriedade é 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 dada para criar um elemento HTML no JavaScript:

documento.CreateElement ('Tagname')

Exemplo

Aqui, primeiro, criaremos um parágrafo em um arquivo JavaScript usando o HTML

tag passada em um "createElement ()”Método:

const texto = documento.createElement ('P');

Use a propriedade TextContent para definir o texto em um parágrafo:

texto.textContent = "Welcome to linuxhint";

Por fim, imprima o texto na página da web usando o “documento.escrever()”Método:

documento.Escreva (texto.TextContent);

Aqui, você pode ver na saída que escrevemos com sucesso o texto na página da web usando JavaScript:

Método 2: Escreva o código HTML dinamicamente usando a propriedade InnerHTML

Para escrever o código html dinamicamente, use o javascript “Innerhtml" propriedade. É a abordagem mais simples para alterar o conteúdo de um elemento HTML. Ele suporta todos os navegadores.

Sintaxe

Siga a sintaxe dada para usar a propriedade InnerHTML:

INNERHTML = "Texto"

Exemplo

No arquivo html, primeiro, crie um botão que chamará a função definida "cabeçalho()”Em JavaScript no evento de clique:

Clique aqui

Crie um parágrafo usando

Tag onde o texto será mostrado no JavaScript e atribuir um ID a ele:

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 aplique um“Innerhtml”Propriedade nele:

função heading ()
documento.getElementById ('cabeçalho').INNERHTML = "

Bem -vindo ao Linuxhint

";

Saída

Compilamos todas as informações essenciais relacionadas à gravação do código HTML dinamicamente usando JavaScript.

Conclusão

Para escrever o código HTML dinamicamente em JavaScript, use o “documento.createElement ()”Método com o“TextContent"Propriedade ou a"Innerhtml" 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 executar uma operação nela. Neste tutorial, descrevemos os métodos para escrever código HTML usando JavaScript dinamicamente.