Propriedade Innerhtml em JavaScript

A propriedade Innerhtml permite a manipulação do conteúdo HTML de várias maneiras. O InnerHTML permite ao usuário definir/atualizar o conteúdo HTML ou obter o conteúdo de um elemento HTML. A propriedade Innerhtml usa o método getElementById para identificar o elemento e executar uma operação relevante.

Para uma melhor compreensão, dividimos o artigo em vários pedaços para demonstrar o uso da propriedade Innerhtml em detalhes:

• Como a propriedade Innerhtml funciona em JavaScript
• Como obter o conteúdo de um elemento usando a propriedade Innerhtml
• Como definir o conteúdo de um elemento usando a propriedade InnerHTML
• Como atualizar o conteúdo de um elemento usando a propriedade InnerHTML

Como a propriedade Innerhtml funciona em JavaScript

A propriedade InnerHTML define/atualiza ou retorna o conteúdo HTML de um elemento. Ambas as funcionalidades de uma propriedade Innerhtml têm diferentes sintaxes que são fornecidas abaixo.

Para obter o conteúdo HTML:

HtmlObject.innerhtml;

Para definir/atualizar o conteúdo HTML:

HtmlObject.inerhtml = "new-val";

Nas sintaxes acima, o HtmlObject a instância identifica o elemento html no qual o inerhtml será aplicado. E o elemento é identificado usando o getElementById método. Considerando que a novo Val é qualquer valor que seria definido como um elemento HTML.

Como usar a propriedade Innerhtml em JavaScript

Esta seção pede vários exemplos que demonstrem o uso da propriedade Innerhtml em JavaScript.

Como usar a propriedade InnerHTML para atualizar o conteúdo HTML

Os seguintes trechos de código demonstram o funcionamento da propriedade InnerHTML para atualizar o conteúdo HTML.

Html

Bem -vindo ao Linuxhint

Clique aqui para obter

O código acima tem um H4 elemento com id = ”h”E um botão com ONCLICK atributo.

JavaScript

função get ()
Alerta (documento.getElementById ("h").innerhtml);

O código JavaScript acima cria uma função get () e contém um alerta que mostraria o conteúdo do elemento ID = ”h““.

Saída

A saída mostra que o conteúdo de um elemento HTML é exibido como um conteúdo de alerta.

Como usar a propriedade InnerHTML para atualizar o conteúdo HTML

Nesta seção, você aprenderá a atualizar o conteúdo de um elemento HTML usando a propriedade InnerHTML.

Html

Linuxhint

Clique aqui para atualizar

O código acima cria um parágrafo tendo id = ”P1”E um botão com um ONCLICK atributo.

JavaScript

função update ()
documento.getElementById ("P1").INNERHTML = "Bem -vindo! A propriedade Innerhtml está sendo usada! ";

O código JS escrito acima cria uma função chamada atualizar() que será invocado com o clique do botão para aplicar a propriedade INNERHTML no elemento (parágrafo) id = ”P1““.

Saída

A partir da saída, observa -se que o conteúdo do parágrafo está sendo atualizado.

Como usar a propriedade InnerHTML para definir o conteúdo HTML

Aqui, mostraremos como o Innerhtml define o conteúdo de um elemento HTML. Para isso, o código HTML e JavaScript praticado nesta seção são elaborados abaixo.

Html

Este é um parágrafo

Clique aqui para definir o conteúdo

O código HTML acima tem dois parágrafos em que o valor do primeiro parágrafo (id = ”P1“) Será usado para definir o valor do segundo parágrafo (id =”P2").

Observação: O div no código acima é apenas por causa de subestimar.

JavaScript

função set ()
const Old = documento.getElementById ("P1").innerhtml;
documento.getElementById ("P2").inerhtml = antigo;

Uma função set () é criada que possui duas declarações. A primeira declaração recebe o conteúdo do parágrafo (id = ”P1“) E salva em uma variável (velho). E a segunda declaração define o valor da variável para o parágrafo (id = ”P2").

Saída

Na saída acima, o parágrafo não tem nada a mostrar, mas ao clicar no botão, o conteúdo do parágrafo (id = ”P1“) Está definido como o parágrafo (id =”P2")

Conclusão

A propriedade INNERHTML do JavaScript permite obter ou atualizar/definir o conteúdo de um elemento HTML. Usando o método getElementById, a propriedade Innerhtml identifica um elemento HTML. Neste artigo, a propriedade Innerhtml do JavaScript é demonstrada de uma maneira breve. Cada subseção aqui apresenta a funcionalidade da propriedade Innerhtml para obter, atualizar ou definir o conteúdo de um elemento HTML.