Obtener y establecer texto interno de elementos HTML en jQuery

Manipulación Modelo de objetos de documento (DOM) es una de las características clave de jQuery. JQuery incluye varios métodos relacionados con el DOM que hacen que obtener el texto interno de los elementos HTML sea muy fácil. html (), texto(), y val () son algunos métodos útiles que se encuentran en la categoría especificada. Estos métodos se denominan obtienen cuando no se agregan argumentos, y obtienen el texto o el valor interno de los elementos HTML. Además, si ha agregado algún valor como argumento, estos métodos se comportarán como métodos setter.

Este artículo discutirá el procedimiento para conseguir y Establecer texto interno de Elementos html en jQuery. Además, los ejemplos relacionados con los métodos html (), text () y val () para obtener y configurar los elementos HTML se proporcionarán texto interno. Entonces, comencemos!

Obtener y establecer texto interno de elementos HTML en jQuery usando el método html ()

El método javaScript html () se utiliza para obtener y establecer el innerhtml o el contenido de los elementos HTML en jQuery. Este método devuelve el contenido del primer elemento HTML coincidente si lo usa para obtener el texto interno; Al establecer el texto interno, sobrescribe el contenido de todos los elementos HTML que se combinan.

Sintaxis del método html ()

Para obtener el texto interno de los elementos HTML:

$ (selector).html ()

Para obtener y establecer el texto interno de los elementos HTML:

$ (selector).html (valor)

Para obtener y establecer el texto interno de los elementos HTML utilizando una función:

$ (selector).html (función (index, currentValue))

En la sintaxis dada anteriormente, "valor"Es el contenido que desea agregar como el texto interno modificado de los elementos HTML", ",índice"Se agrega para devolver la posición de índice en el conjunto de elementos HTML, por último,"valor actual"Se agrega para recuperar el texto interno actual de un elemento HTML específico.

Ejemplo: obtenga y establezca el texto interno de los elementos HTML en jQuery () usando el método HTML ()

En el ejemplo dado a continuación, cambiaremos el texto interno de todos los párrafos que se agregan como elementos HTML con el

etiqueta. Para hacerlo, escribiremos el siguiente código en nuestro "índice.html" archivo:

Cambiar el contenido de los elementos P

Este es el primer párrafo.

Éste es el segundo párrafo.

Para manipular elementos HTML en jQuery, tenemos que escribir el código deseado dentro del cuerpo del $ (documento).listo() Método, en un archivo JavaScript. Aquí, especificaremos que en el "hacer clic"Evento de nuestro"botón", El intérprete seleccionará todo"pag"Elementos y establecer su contenido en la cadena especificada en el"html ()" método:

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("P").html ("Esto es Linuxhint.comunicarse");
);
);

Después de guardar el código proporcionado en ambos archivos, abriremos "índice.html"Con la ayuda de VS Code"Servidor hepático":

Ahora, haremos clic en el "Cambiar el contenido de los elementos PBotón "que se resalta en la salida:

Esta acción obtendrá todos los elementos del párrafo HTML y establecerá su texto interno de la siguiente manera:

Obtenga y establezca el texto interno de los elementos HTML usando el método Text ()

Los métodos text () y html () se utilizan en jQuery para obtener y establecer el texto interno de los elementos HTML. Sin embargo, cuando utiliza el texto() Método para obtener contenido de elementos HTML, elimina el marcado HTML después de recuperar los elementos coincidentes. Entonces, si desea obtener texto, establecer el texto y el marcado HTML de los elementos a la vez, entonces busque la ejecución del método html (); de lo contrario, el método text () te cubrió.

Sintaxis del método text ()

Para obtener el contenido de los elementos HTML:

$ (selector).texto()

Para obtener y establecer contenido de elementos HTML:

$ (selector).texto (valor)

Para obtener y establecer contenido de elementos HTML utilizando una función:

$ (selector).texto (función (índice, currentValue))

Aquí, "valor"Es el contenido que desea establecer como texto de elementos HTML",índice"Se agrega para devolver la posición de índice en el conjunto de elementos HTML, por último,"valor actual"Se agrega para recuperar el contenido actual de un elemento HTML específico.

Ejemplo: Obtenga y establezca el texto interno de los elementos HTML usando Text () Método

Ahora, ejecutaremos el ejemplo anterior con la ayuda de "texto()"Método para obtener y configurar el texto de todos"pag"Elementos HTML. Aquí está el código que hemos agregado en el "índice.html" archivo:

Cambiar el contenido de los elementos P

Este es el primer párrafo.

Éste es el segundo párrafo.

En nuestro "mi proyecto.js"Archivo, invocaremos el"texto()"Método para establecer el texto interno de todos los elementos de párrafo en"Esto es linuxhint.comunicarse":

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("P").texto ("Este es Linuxhint.com ");
);
);

Haciendo clic en el "Establecer contenido"El botón cambiará el texto de los elementos de párrafo agregado a"Esto es linuxhint.comunicarse":

Obtener y establecer el texto interno de los elementos HTML en jQuery usando el método Val ()

Cuando agrega elementos de formulario HTML en su aplicación, puede usar el "val ()Método para obtener y establecer el valor de atributo de los elementos HTML especificados. Devuelve el atributo del primer elemento HTML coincidente cuando se invoca para obtener un valor y, en caso de establecer el valor del atributo, cambia el valor de atributo para todos los elementos HTML coincidentes.

Sintaxis del método Val ()

Para obtener el valor de atributo de los elementos HTML:

$ (selector).val ()

Para obtener y establecer el valor de atributo de los elementos HTML:

$ (selector).Val (valor)

Para obtener y establecer el valor de atributo de los elementos HTML utilizando una función:

$ (selector).Val (función (index, currentValue))

En la sintaxis dada anteriormente, "valor"Es el valor especificado que desea modificar para un atributo del elemento HTML", "índice"Se agrega para devolver la posición de índice en el conjunto de elementos HTML, por último,"valor actual"Se agrega para recuperar el valor de atributo actual del elemento HTML seleccionado.

Ejemplo: obtenga y establezca el texto interno de los elementos HTML en jQuery usando el método Val ()

El ejemplo dado a continuación cambiará el valor de atributo del "campo de entrada"Eso se agrega en nuestro"índice.html" archivo:

Nombre:

Establecer el valor

Para este propósito, utilizaremos el "mi proyecto.js"Archivo establece su valor en"Esto es linuxhint.comunicarse"Usando el método Val ():

$ (documento).Ready (function ()
$ ("botón").hacer clic (function ()
$ ("Entrada: texto").Val ("Este es Linuxhint.com ");
);
);

Hacemos clic en el "Establecer el valor"Botón y la cadena"Esto es linuxhint.comunicarse"Se establecerá en el campo de entrada:

La salida dada anterior declara que hemos establecido con éxito el valor del campo de entrada agregado.

Conclusión

Html (), text () y val () son los métodos más útiles que se pueden utilizar para obtener y establecer el texto interno de los elementos HTML en jQuery. El método text () obtiene y establece el contenido de elementos HTML, mientras que el método html () también establece su marcado HTML. También puede invocar el método Val () HTML para cambiar los valores de atributo. Este artículo sobre los métodos para obtener y establecer el texto interno de los elementos HTML en jQuery proporcionando ejemplos apropiados.