Como alterar o texto do rótulo usando JavaScript

No processo de preencher um formulário específico ou um questionário, muitas vezes há situações em que é necessário exibir uma resposta ou notificação específica em resposta à opção selecionada. Por exemplo, lidar com perguntas 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 abordagens a seguir podem ser utilizadas para alterar o texto do rótulo em JavaScript:

• • ““Innerhtml" propriedade.
  • ““InnerText" propriedade.
  • jQuery “texto()" e "html ()" métodos.

Abordagem 1: Alterar o texto do rótulo em JavaScript usando a propriedade InnerHTML

O "Innerhtml”Propriedade retorna o conteúdo HTML interno de um elemento. Esta 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

elemento.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

Passe pelo snippet de código a seguir para explicar claramente o conceito declarado:

Dom



Clique aqui

• • Primeiro, dentro do “”Tag, inclua a“rótulo”Com o especificado“eu ia" e "texto”Valores.
  • Depois disso, crie um botão com um anexo “ONCLICKEvento invocando a função LabelText ().

Agora, siga o código JavaScript abaixo:

function labelText ()
Let Get = Document.getElementById ('lbl')
pegar.INNERHTML = "O nome abreviado é o modelo de objeto de documento";

• • Declare uma função chamada “LabelText ()”.
  • Em sua definição, acesse o ID do especificado “rótulo”Usando o“documento.getElementById ()”Método.
  • Por fim, aplique a propriedade Innerhtml e atribua um novo “texto”Valor para a etiqueta acessada. Isso resultará na transformação do texto do rótulo em um novo valor de texto no botão Clique.

Saída

Na saída acima, pode -se observar que o valor do texto de “rótulo”É alterado tanto no DOM quanto no código também no“Elementos" seção.

Abordagem 2: Alterar o texto do rótulo em JavaScript usando a propriedade InnerText

O "InnerText”Propriedade 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 para o texto da etiqueta atribuída.

Sintaxe

elemento.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:

Insira o nome:

N / D

• • Primeiro, aloque um campo de texto de entrada com o especificado “eu ia”. O "nulo”O valor aqui indica que o valor será buscado do usuário e definir o preenchimento automático para“desligado”Evitará os valores sugeridos.
  • Depois disso, inclua um rótulo com o especificado “eu ia" e "texto" valor.

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

function labelText ()
Let Get = Document.getElementById ('lbl');
Deixe o nome = documento.getElementById ('nome').valor;
pegar.inerText = nome;

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

Saída

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

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

O "texto()”O método retorna o conteúdo de texto dos elementos selecionados.O "html ()”O método 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 acima mencionada:

• • ““Seletor”Refere -se ao innerhtml do elemento acessado.

Exemplo

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

Passe pelo trecho de código abaixo:

Este é o seguinte site:



Contente:



Clique no site
Clique para o conteúdo

• • Em primeiro lugar, inclua o “jQueryBiblioteca para aplicar seus métodos.
  • Depois disso, dentro do “”Tag, inclua dois rótulos diferentes com o especificado“eu iaE 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 “ONCLICK”Evento invocando duas funções especificadas diferentes.

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

function labelText ()
$ ('#lbl1').texto ("linuxhint")

function 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 ia”E aplique o“texto()”Método para isso. Isso resultará na alteração do valor do 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. Nesse caso, aplique o “html ()”Método. Este método também funcionará da mesma maneira e retornará o valor do texto especificado, alterando o texto do rótulo.

Saída

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

Nós compilamos as abordagens para alterar o texto do rótulo usando JavaScript.

Conclusão

O "Innerhtml”Propriedade, a“InnerText”Propriedade, ou JQuery's“texto()" e "html ()”Os métodos 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, mudando assim. A abordagem jQuery pode ser usada para transformar o valor do texto da etiqueta 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.