Inserindo HTML em um div - JavaScript

Em muitos casos, é necessário adicionar dados dinamicamente nos sites, como em fóruns de mídia social, lojas on -line, sites de notícias, painéis e assim por diante. Mais especificamente, qualquer site que exibe alterações de dados ou conteúdo pode exigir atualizações dinâmicas usando JavaScript ou outras ferramentas de desenvolvimento da Web.

Este artigo descreverá como inserir um html em um elemento div em javascript.

Como inserir html em um div usando javascript?

Como JavaScript é uma linguagem dinâmica e é usada dinamicamente. Portanto, para esse fim, use os atributos pré -construídos JavaScript. Para inserir um HTML em uma div, utilize as seguintes abordagens:

• Propriedade Innerhtml
• Propriedade InnerText

Método 1: Insira HTML em um div usando a propriedade “Innerhtml”

Use o "Innerhtml”Propriedade para inserir o HTML em uma div. Ele pode recuperar o conteúdo HTML de um elemento como uma string ou definir um novo conteúdo HTML para um elemento, incluindo tags de texto ou html.

Sintaxe

Use a sintaxe dada para a propriedade InnerHTML para adicionar HTML em uma div em JavaScript:

elemento.Innerhtml

Exemplo

Crie uma div em um elemento html usando tag e associe um id “insertText”

Em um arquivo javascript ou na tag, obtenha a referência do elemento div usando seu ID atribuído e use o “Innerhtml”Atributo para definir o texto com o link âncora:

documento.getElementById ("insertText").INNERHTML = "Bem -vindo ao Linuxhint";

Como você pode ver, o texto com o link foi inserido com sucesso na página usando o JavaScript:

Método 2: Insira HTML em um div usando a propriedade "InnerText"

Outra maneira de inserir html em uma div é usar o “InnerText" propriedade. Ele pode obter/buscar o conteúdo de texto do elemento HTML ou definir novo conteúdo de texto para um elemento HTML.

Sintaxe

Utilize a seguinte sintaxe para a propriedade InnerText:

elemento.InnerText

Exemplo

Aqui, adicionaremos o texto no elemento div usando o atributo InnerText:

documento.getElementById ("insertText").INNERTEXT = "HY! Estou inserindo neste div usando a propriedade 'InnerText';

Saída

Isso se trata de inserir HTML em um div usando JavaScript.

Conclusão

Para inserir tags e texto HTML em um elemento HTML DIV, use o “Innerhtml”Propriedade e para inserir apenas texto no elemento div, use o“InnerText" propriedade. Este artigo descreveu as maneiras de inserir um HTML em um div usando JavaScript.