Como alterar o conteúdo do elemento HTML em JavaScript

Html sigla de linguagem de marcação de texto hiper é usada para criar estrutura de páginas da web que você vê na internet todos os dias. Enquanto isso, o JavaScript é uma linguagem de script bem conhecida usada para executar operações dinâmicas nas páginas da web para torná-las mais interativas.

Um recurso HTML interessante é HTML DOM Short para Modelo de Objeto de Documento. É uma API de programação para documentos HTML e XML. É basicamente usado para fornecer uma estrutura lógica aos documentos. Ele define como um documento HTML pode ser avaliado e manipulado. Permite que o JavaScript altere o conteúdo dos elementos HTML.

Neste artigo, discutiremos:

1. Alterando o conteúdo dos elementos HTML usando JavaScript
2. Alterando o valor do atributo HTML usando JavaScript
3. Uso do documento.Método Write ()

Alterando o conteúdo dos elementos HTML usando JavaScript

A propriedade Innerhtml é a abordagem mais rápida para alterar o conteúdo dos elementos HTML. É explicado em detalhes abaixo:

Propriedade Innerhtml

A propriedade Innerhtml altera o conteúdo de um elemento HTML. Para usar este método, use a seguinte sintaxe.

Sintaxe do uso de innerhtml

Vamos demonstrar a propriedade Innerhtml com um exemplo.

Exemplo 1

Este é um parágrafo

O parágrafo acima foi alterado pela propriedade Innerhtml

No exemplo acima, estamos manipulando o

elemento usando a propriedade JavaScript InnerHTML. O parágrafo tem um id = "para1". O HTML DOM usa este ID para obter o elemento específico e depois alterar o conteúdo de

tag usando a propriedade InnerHTML. Dessa maneira, o antigo parágrafo é substituído pelo novo parágrafo. A saída do exemplo acima é a seguinte:

Também podemos alterar os elementos usando este método. Vamos fazer um exemplo em que a propriedade INNERHTML altera o

elemento usando seu id.

Exemplo 2

Vamos mudar este título

O cabeçalho antigo foi alterado

No exemplo acima, o html dom usa o id = "head2" para obter o

elemento e a propriedade Innerhtml altera o conteúdo do elemento. A saída é a seguinte.

Agora vamos discutir como podemos alterar o valor de um atributo html usando JavaScript.

Alteração do valor do atributo

Usando o nome do atributo, podemos alterar o valor do atributo html.

Sintaxe

A sintaxe é mostrada abaixo:

documento.getElementById (id).atributo = novo valor

Vamos demonstrar a sintaxe acima usando um exemplo adequado.

A imagem do cachorro é alterada para a imagem de gato

No exemplo acima, o html dom recebe o elemento IMG por id = ”image1" então o atributo javascript src chagens de um dogpico.JPG para um catpic.jpg.

Passando para o último método que é documento.Método Write ().

documento.escrever()

documento.Write () é usado para escrever expressões HTML ou código JavaScript diretamente no fluxo de saída HTML. Ele substituirá o documento se você usar esse método após carregar o documento HTML. Vamos tentar um exemplo.

Este é um parágrafo

Este é outro parágrafo

No exemplo acima, o documento.Método Write () mostra a altura da tela da janela como saída.

Conclusão

O HTML DOM fornece certas propriedades que permitem que o JavaScript altere o conteúdo dos elementos HTML. Para alterar o conteúdo dos elementos HTML, a propriedade Innerhtml () é usada. Você também pode alterar o valor do atributo dos elementos HTML usando diretamente o nome do atributo. Enquanto isso, o documento.A propriedade Write () é usada para escrever expressões HTML ou código JavaScript diretamente no fluxo de saída HTML. Este artigo discute essas propriedades em detalhes com exemplos relevantes.