Como alterar o texto do rótulo usando JavaScript

No processo de preenchimento de um determinado formulário ou questionário, muitas vezes há situações em que há a necessidade de exibir uma determinada resposta ou notificação em resposta à opção selecionada. Por exemplo, lidar com questões de múltipla escolha, etc. Nesses casos, alterar o texto do rótulo usando JavaScript é muito útil para melhorar a acessibilidade dos formulários HTML e o design geral do documento.

Como alterar o texto do rótulo usando JavaScript?

As seguintes abordagens podem ser utilizadas para alterar o texto do rótulo em JavaScript:

- “ innerHTML ' propriedade.
- “ Texto interno ' propriedade.
- jQuery “ texto() ' e ' html() ' métodos.

Abordagem 1: alterar o texto do rótulo em JavaScript usando a propriedade innerHTML

O ' innerHTML ” retorna o conteúdo HTML interno de um elemento. Essa propriedade pode ser utilizada para buscar o rótulo específico e alterar seu texto para um valor de texto recém-atribuído.

Sintaxe

element.innerHTML

Na sintaxe acima:

- “ elemento ” refere-se ao elemento sobre o qual a propriedade específica será aplicada para retornar seu conteúdo HTML.

Exemplo

Percorra o seguinte trecho de código para explicar claramente o conceito declarado:

< Centro >< corpo >
< etiqueta Eu iria = 'lb' > DOM etiqueta >
 
< botão ao clicar = 'labelText()' > Clique aqui botão >
corpo > Centro >

- Primeiro, dentro do “ ” , inclua o “ etiqueta ” com o especificado “ Eu iria ' e ' texto ” valores.
- Depois disso, crie um botão com um “ ao clicar ” invocando a função labelText().

Agora, siga o código JavaScript abaixo:

função labelText ( ) {
deixar get = document.getElementById ( 'lb' )
get.innerHTML= 'O nome abreviado é Document Object Model' ;
}

- Declare uma função chamada “ labelText() ”.
- Em sua definição, acesse o id do especificado “ etiqueta ” usando o “ document.getElementById() ” método.
- Por fim, aplique a propriedade innerHTML e atribua um novo “ texto ” para o rótulo acessado. Isso resultará na transformação do texto do rótulo em um novo valor de texto ao clicar no botão.

Resultado

Na saída acima, pode-se observar que o valor de texto de “ etiqueta ” é alterado no DOM e no código, bem como no “ Elementos ' seção.

Abordagem 2: alterar o texto do rótulo em JavaScript usando a propriedade innerText

O ' Texto interno ” retorna o conteúdo de texto do elemento. Esta propriedade pode ser implementada para alocar um valor de entrada do usuário inserido no campo de entrada ao texto do rótulo atribuído.

Sintaxe

element.innerText

Na sintaxe acima:

- “ elemento ” indica o elemento sobre o qual a propriedade específica será aplicada para retornar seu conteúdo textual.

Exemplo

O exemplo a seguir demonstra o conceito declarado:

< Centro >< corpo >
Insira o nome: < entrada modelo = 'texto' Eu iria = 'nome' valor = '' autocompletar = 'desligado' >
< entrada modelo = 'botão' Eu iria = 'bt' valor = 'Alterar texto do rótulo' ao clicar = 'labelText()' > p >
< etiqueta Eu iria = 'lb' > N / UMA etiqueta >
corpo > Centro >

- Primeiro, aloque um campo de texto de entrada com o “ Eu iria ”. O ' nulo ” aqui indica que o valor será buscado do usuário e definindo o preenchimento automático como “ desligado ” evitará os valores sugeridos.
- Depois disso, inclua um rótulo com o “ Eu iria ' e ' texto ' valor.

Agora, no snippet de código JavaScript, execute as seguintes etapas:

função labelText ( ) {
deixar get = document.getElementById ( 'lb' ) ;
deixar nome = document.getElementById ( 'nome' ) .valor;
get.innerText = nome;
}

- Defina uma função chamada “ labelText() ”. Em sua definição, acesse o rótulo criado usando o “ document.getElementById() ” método.
- Da mesma forma, repita a etapa acima para acessar o campo de texto de entrada especificado e obter dele o valor inserido pelo usuário.
- Por fim, atribua o valor inserido pelo usuário da etapa anterior ao rótulo obtido. Isso mudará o texto do rótulo para o valor inserido pelo usuário no campo de texto de entrada.

Resultado

Na saída acima, é evidente que o requisito desejado foi alcançado.

Abordagem 3: Alterar o texto do rótulo em JavaScript usando os métodos jQuery text() e html()

O ' texto() ” retorna o conteúdo de texto dos elementos selecionados. html() ” retorna o conteúdo innerHTML dos elementos selecionados.

Sintaxe

$ ( seletor ) .texto ( )

Nesta sintaxe:

- “ seletor ” aponta para o conteúdo de texto do elemento acessado.

$ ( seletor ) .html ( )

Na sintaxe dada acima:

- “ seletor ” refere-se ao innerHTML do elemento acessado.

Exemplo

Este exemplo ilustrará o conceito declarado usando métodos jQuery.

Percorra o trecho de código abaixo fornecido:

< roteiro src = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > roteiro >
< Centro >< corpo >
< etiqueta Eu iria = 'lb1' > Este é o seguinte site: etiqueta >
 
< etiqueta Eu iria = 'lb2' > Contente: etiqueta >
 
< botão ao clicar = 'labelText()' > Clique por Local na rede Internet botão >
< botão ao clicar = 'labelText2()' > Clique por Contente botão >
corpo > Centro >

- Em primeiro lugar, inclua o “ jQuery ” para aplicar seus métodos.
- Depois disso, dentro do “ ', inclua dois rótulos diferentes com o ' Eu iria ” e valor de texto contra cada um deles.
- Além disso, aloque botões separados para cada um dos rótulos criados. Ambos os botões terão um anexo “ ao clicar ” invocando duas funções especificadas diferentes.

Agora, percorra as seguintes linhas de código JavaScript:

função labelText ( ) {
$ ( '#lbl1' ) .texto ( 'Linux' )
}
função labelText2 ( ) {
$ ( '#lbl2' ) .html ( 'JavaScript' )
}

- Na primeira etapa, declare uma função chamada “ labelText() ”.
- Em sua definição, acesse o rótulo contra o “buscado” Eu iria ” e aplique o “ texto() ” para isso. Isso resultará na alteração do valor de texto do rótulo para o valor especificado em seu parâmetro.
- Da mesma forma, defina uma função chamada “ labelText2() ”.
- Aqui, da mesma forma, repita a etapa discutida acima para acessar o rótulo. Neste caso, aplique o “ html() ” método. Este método também funcionará da mesma maneira e retornará o valor de texto especificado, alterando o texto do rótulo.

Resultado

Na saída acima, o primeiro valor de texto transformado do rótulo no Document Object Model (DOM) corresponde ao jQuery “ texto() ” e o outro é resultado do método “ html() ” método.

Compilamos as abordagens para alterar o texto do rótulo usando JavaScript.

Conclusão

O ' innerHTML ” propriedade, o “ Texto interno ” ou a propriedade “ do jQuery “ texto() ' e ' html() ” podem ser utilizados para alterar o texto do rótulo usando JavaScript. A propriedade innerHTML pode ser aplicada para obter o rótulo específico e alterar seu conteúdo de texto para um valor de texto recém-atribuído. A propriedade innerText pode ser implementada para alocar um novo valor de texto ao rótulo acessado, alterando-o. A abordagem jQuery pode ser usada para transformar o valor de texto do rótulo com a ajuda de seus dois métodos, resultando no mesmo resultado na forma de dois valores de texto alocados diferentes. Este artigo demonstrou as técnicas para alterar o texto do rótulo usando JavaScript.

Como alterar o texto do rótulo usando JavaScript