Obtenha e defina texto interno de elementos html no jQuery

Manipulando Modelo de objeto de documento (DOM) é uma das principais características do jQuery. O jQuery inclui vários métodos relacionados ao DOM que facilitam a obtenção e a configuração do texto interno dos elementos html. html (), texto(), e val () são alguns métodos úteis que estão na categoria especificada. Esses métodos são chamados de getters quando nenhum argumento é adicionado e eles recebem o texto ou valor interno dos elementos html. Além disso, se você adicionou algum valor como argumento, esses métodos se comportarão como métodos de setter.

Este artigo discutirá o procedimento para pegar e defina texto interno de Elementos html em jQuery. Além disso, os exemplos relacionados aos métodos html (), text () e val () para obter e definir o texto interno de elementos html serão fornecidos. Então vamos começar!

Obtenha e defina texto interno dos elementos HTML no método JQuery usando HTML ()

O método javascript html () é utilizado para obter e definir o inerhtml ou o conteúdo dos elementos html no jQuery. Este método retorna o conteúdo do primeiro elemento HTML correspondente se você o usar para obter o texto interno; Ao definir o texto interno, ele substitui o conteúdo de todos os elementos HTML que correspondem.

Sintaxe do método html ()

Para obter o texto interno dos elementos HTML:

$ (seletor).html ()

Para obter e definir o texto interno dos elementos HTML:

$ (seletor).html (valor)

Para obter e definir o texto interno dos elementos HTML, utilizando uma função:

$ (seletor).html (função (índice, currentValue))

Na sintaxe acima mencionada, “valor”É o conteúdo que você deseja adicionar como o texto interno modificado dos elementos HTML,“índice”É adicionado para retornar a posição do índice no conjunto de elementos HTML, finalmente,“valor atual”É adicionado para recuperar o texto interno atual de um elemento HTML específico.

Exemplo: obtenha e defina texto interno dos elementos html em jQuery () usando o método html ()

No exemplo abaixo, alteraremos o texto interno de todos os parágrafos que são adicionados como elementos html com o

marcação. Para fazer isso, escreveremos o seguinte código em nosso “índice.html" arquivo:

Alterar o conteúdo dos elementos P

Este é o primeiro parágrafo.

Esse é o segundo parágrafo.

Para manipular elementos html em jQuery, temos que escrever o código desejado dentro do corpo do $ (documento).preparar() Método, em um arquivo JavaScript. Aqui, especificaremos isso no “clique”Evento do nosso“botão”, O intérprete selecionará o All“p”Elementos e defina seu conteúdo para a sequência especificada no“html ()”Método:

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("p").html ("isso é Linuxhint.com");
);
);

Depois de salvar o código fornecido nos dois arquivos, abriremos “índice.html”Com a ajuda do código VS“Servidor fígado”:

Agora, clicaremos no “Alterar o conteúdo dos elementos P”Botão destacado na saída:

Esta ação receberá todos os elementos do parágrafo HTML e definirá seu texto interno da seguinte maneira:

Obtenha e defina o texto interno dos elementos html usando o método text ()

Os métodos text () e html () são usados ​​no jQuery para obter e definir o texto interno dos elementos html. No entanto, quando você utiliza o texto() Método para obter o conteúdo dos elementos HTML, ele remove a marcação HTML depois de recuperar os elementos correspondentes. Portanto, se você deseja obter texto, defina texto e a marcação HTML dos elementos de uma só vez, opte pela execução do método html (); Caso contrário, o método text () abordou você.

Sintaxe do método text ()

Para obter o conteúdo dos elementos HTML:

$ (seletor).texto()

Para obter e definir o conteúdo dos elementos HTML:

$ (seletor).texto (valor)

Para obter e definir o conteúdo dos elementos HTML, utilizando uma função:

$ (seletor).Texto (função (índice, currentValue))

Aqui, "valor”É o conteúdo que você deseja definir como texto de elementos html,“índice”É adicionado para retornar a posição do índice no conjunto de elementos HTML, finalmente,“valor atual”É adicionado para recuperar o conteúdo atual de um elemento HTML específico.

Exemplo: obtenha e defina o texto interno dos elementos html usando o método text ()

Agora, vamos executar o exemplo anterior com a ajuda de “texto()”Método para obter e definir o texto de todos“p”Elementos HTML. Aqui está o código que adicionamos no “índice.html" arquivo:

Alterar o conteúdo dos elementos P

Este é o primeiro parágrafo.

Esse é o segundo parágrafo.

Na nossa "meu projeto.JS”Arquivo, nós invocaremos o“texto()”Método para definir o texto interno de todos os elementos do parágrafo como“Isso é Linuxhint.com”:

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("p").texto ("Isso é Linuxhint.com ");
);
);

Clicando no “Defina o conteúdo”O botão mudará o texto dos elementos de parágrafo adicionados para“Isso é Linuxhint.com”:

Obtenha e defina texto interno dos elementos HTML no método JQuery usando val ()

Quando você adiciona elementos de formulário HTML em seu aplicativo, você pode usar o “val ()”Método para obter e definir o valor do atributo dos elementos HTML especificados. Ele retorna o atributo do primeiro elemento HTML correspondente quando é chamado para obter um valor e, no caso de definir o valor do atributo, altera o valor do atributo para todos os elementos HTML correspondentes.

Método Sintaxe do Val ()

Para obter o valor do atributo dos elementos HTML:

$ (seletor).val ()

Para obter e definir o valor do atributo dos elementos HTML:

$ (seletor).val (valor)

Para obter e definir o valor do atributo dos elementos HTML, utilizando uma função:

$ (seletor).Val (função (índice, currentValue))

Na sintaxe acima mencionada, “valor”É o valor especificado que você deseja modificar para um atributo do elemento HTML,“índice”É adicionado para retornar a posição do índice no conjunto de elementos HTML, finalmente,“valor atual”É adicionado para recuperar o valor do atributo atual do elemento HTML selecionado.

Exemplo: obtenha e defina texto interno dos elementos html no método jQuery usando val ()

O exemplo abaixo do rumo alterará o valor do atributo do “campo de entrada”Isso é adicionado em nosso“índice.html" arquivo:

Nome:

Defina o valor

Para esse fim, utilizaremos o “meu projeto.JS”Arquivo para definir seu valor como“Isso é Linuxhint.com”Usando o método Val ():

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("entrada: texto").val ("Isso é Linuxhint.com ");
);
);

Vamos clicar no “Defina o valor”Botão e a string“Isso é Linuxhint.com”Será definido no campo de entrada:

A saída acima mencionada declara que definimos com sucesso o valor do campo de entrada adicionado.

Conclusão

O html (), text () e val () são os métodos mais úteis que podem ser utilizados para obter e definir o texto interno dos elementos html no jQuery. O método text () obtém e define o conteúdo dos elementos HTML, enquanto o método HTML () também define sua marcação HTML. Você também pode invocar o método Val () HTML para alterar os valores de atributo. Este artigo discutiu os métodos para obter e definir o texto interno dos elementos HTML no jQuery, fornecendo exemplos apropriados.