Como alterar elementos HTML usando JavaScript
Este artigo discutirá o procedimento para alterar os elementos HTML usando JavaScript. Além disso, os exemplos relacionados ao uso da propriedade Innerhtml também serão demonstrados neste artigo. Então vamos começar!
Sintaxe da propriedade innerhtml JavaScript
elemento.INNERHTML = ValorAqui, "elemento”É o elemento HTML que você selecionou para alterar seu conteúdo e“valor”É o conteúdo que definiremos.
Exemplo 1: Alteração dos elementos HTML usando JavaScript
Este exemplo mostrará como usar o “Innerhtml”Propriedade JavaScript para modificar o conteúdo de um elemento HTML. Em primeiro lugar, adicionaremos um elemento de cabeçalho com o
tag de título e um parágrafo com o
Tag html:
Altere os elementos HTML usando JavaScript
Uma sequência de teste
Agora, queremos mudar o conteúdo do “”Elemento tendo o id“P1”. Para fazer isso, utilizaremos o “documento.getElementById ()”Método para obter o elemento especificado. Depois disso, definiremos o conteúdo do nosso
elemento para “Isso é Linuxhint.com”:
Mudamos o conteúdo do parágrafo acima
Execute o programa acima do seu editor de código favorito ou qualquer caixa de areia de codificação on-line; No entanto, utilizaremos o JSBIN para esse fim:
Confira a saída abaixo, que obtivemos ao executar o programa acima:
Exemplo 2: Alteração dos elementos HTML usando JavaScript
No exemplo anterior, mudamos o conteúdo do elemento de parágrafo. Agora, escreveremos um programa JavaScript para modificar o conteúdo do elemento html de título.
Como você pode ver, adicionamos um título com o
tag with id “id1”Ter o conteúdo“O velho título JavaScript”:
O velho título JavaScript
Na próxima etapa, criaremos uma variável de elemento que invocará o “documento.getElementById ()”Método para obter o elemento de cabeçalho com o ID“id1”:
Este programa mudou o "The Old JavaScript Heading" para "The New JavaScript Heading"
A saída abaixo do rumo significa que o conteúdo do elemento HTML de título é alterado agora:
Exemplo 3: Alteração dos elementos HTML usando JavaScript
Você também pode alterar o conteúdo dos múltiplos elementos HTML de uma vez. Para demonstrar como fazer isso, adicionaremos três elementos html, um título com o
tag, um parágrafo com a tag e um elemento HTML de divisão de conteúdo com a tag:
Altere os elementos HTML usando JavaScript
Este é o primeiro elemento P.
Este é o primeiro elemento div.
Agora, mudaremos o conteúdo do elemento de parágrafo com o ID “P1”E elemento de divisão de conteúdo com“div" eu ia:
Dê uma olhada na saída do nosso programa JavaScript:
Exemplo 4: Alteração dos elementos HTML usando JavaScript
Você também pode excluir o conteúdo de um elemento HTML utilizando o JavaScript “Innerhtml" propriedade. No código JavaScript a seguir, adicionamos um elemento de parágrafo com o “demonstração" eu ia:
Clique no botão abaixo fornecido para excluir o conteúdo HTML
Na próxima etapa, adicionaremos um botão e anexaremos um “ONCLICK"Ouvinte de eventos para isso. Quando clicaremos no “Excluir”Botão, ele invocará o“MyFunction ()”Método para excluir o conteúdo de
Elemento HTML:
Por fim, definiremos o “MyFunction ()”Método da seguinte forma:
A execução do programa acima do rumo mostrará a seguinte saída. Clique no "Excluir”Botão para excluir o conteúdo do elemento HTML do parágrafo:
Como você pode ver, o “InnerhtmlPropriedade do
O elemento HTML agora está definido como em branco:
Conclusão
O Innerhtml A propriedade HTML DOM é utilizada para alterar o conteúdo dos elementos HTML em JavaScript. Também pode ser usado para escrever o HTML dinâmico no documento HTML, como links, formulários de comentários e formulários de registro. Este artigo discutiu o procedimento para alterar os elementos HTML usando JavaScript. Além disso, exemplos relacionados ao uso da propriedade innerhtml HTML também são demonstrados neste artigo.