Cambiar el texto de una etiqueta usando jQuery

  2. HowTo
  3. jQuery Howtos
  4. Cambiar el texto de una etiqueta usando …
Neha Imran 15 febrero 2024
jQuery jQuery Text
  1. Cambiar el texto de una etiqueta en jQuery
  2. Use el método jQuery val() para cambiar el texto de la etiqueta
  3. Use el método jQuery text() para cambiar el texto de la etiqueta
  4. Use el método jQuery html() para cambiar el texto de la etiqueta
  5. Use el método jQuery append() para cambiar el texto de la etiqueta
Cambiar el texto de una etiqueta usando jQuery

Este artículo cubrirá numerosas estrategias y tácticas para utilizar jQuery para modificar el contenido de texto de los elementos HTML elegidos. Cada enfoque se discutirá en profundidad, junto con algunos ejemplos reales de funcionamiento de cada método.

Cambiar el texto de una etiqueta en jQuery

Una biblioteca de JavaScript liviana llamada jQuery le permite escribir menos y lograr más. El propósito de jQuery es facilitar considerablemente la administración de JavaScript en su sitio web.

Muchas acciones básicas que a menudo se realizan al escribir numerosas líneas de código JavaScript están envueltas en los métodos de jQuery, por lo que debe escribir una línea de código para usarlas. Aprender sobre jQuery y utilizarlo puede mejorar su flujo de trabajo.

Exploraremos el uso de jQuery para modificar el texto de los componentes HTML.

jQuery, una gran herramienta, nos ofrece varias formas convenientes de interactuar con los componentes HTML. Hoy hablaremos sobre los métodos .val(), .text(), .html() y .append() y la forma en que podrían ayudarnos a lograr la funcionalidad que necesitamos.

Use el método jQuery val() para cambiar el texto de la etiqueta

El val() es un método utilizado para realizar operaciones sobre los valores de los elementos en una página web basada en HTML. Este método puede establecer o recuperar el valor de un elemento en particular.

El método val() de jQuery solo se puede utilizar en elementos HTML con un atributo valor.

Sintaxis:

$(* selector*).val()

Esto devolverá el valor del elemento seleccionado.

$(* selector*).val(* value*)

Esto establecerá el valor del elemento seleccionado al valor que especificamos.

$(*selector*).val(function*(index, currentvalue)*)

Esto establecerá el valor del elemento seleccionado mediante el uso de una función. El parámetro index devuelve el índice del elemento, y el parámetro currentvalue devuelve el valor del elemento si se especifica.

Lo que debemos hacer ahora es ver el ejemplo de trabajo de la sintaxis y la explicación anteriores.

Analicemos dos casos: uno en el que queremos anular o establecer el valor del atributo por completo, y el segundo en el que queremos agregar el texto al valor especificado anteriormente.

Establecer el valor del elemento

En este caso, aprenderemos a establecer el valor del elemento HTML seleccionado utilizando la función .val(). Observe el código a continuación para comprender la idea.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("input:text").val("val() method of jQuery.");
            });
        </script>
    </head>
    <body>
        <input type="text" value="">
    </body>
</html>

Producción:

jQuery Cambiar texto de etiqueta usando val() - Caso 1

Seleccionamos el elemento entrada: texto, lo que significa seleccionar el elemento de entrada de tipo texto. El valor era nulo en la etiqueta de entrada, pero le asignamos el valor usando jQuery.

De acuerdo con el método discutido anteriormente, jQuery seleccionará todas las etiquetas de entrada de tipo texto.

Analicemos otro caso en el que tenemos más de una etiqueta de entrada en nuestro código y queremos establecer el valor de la específica. Verifique el código a continuación.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#Box2").val("val() method of jQuery.");
            });
        </script>
    </head>
    <body>
        <input id="Box1" type="text" value="">
        <input id="Box2" type="text" value="Hello">
        <input id="Box3" type="text" value="">
    </body>
</html>

Producción:

jQuery Cambiar texto de etiqueta usando val() - Caso 1.1

Puede ver en la salida que solo el segundo cuadro de entrada contiene un valor, ya que seleccionamos solo este. Si hay varias etiquetas de entrada del mismo tipo, podemos darle a cada una un ID para identificarlas.

Otro punto esencial es que la segunda etiqueta de entrada ya tenía algún valor, pero fue anulado por el método val().

Agregar el valor al elemento

En este caso, nos centraremos en agregar el valor especificado al valor anterior del elemento HTML. Verifique el código a continuación.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("input:text").val(function(i, value){
                    return value + " World";
                });
            });
        </script>
    </head>
    <body>
        <input type="text" value="Hello">
    </body>
</html>

Producción:

jQuery Cambiar texto de etiqueta usando val() - Caso 2

Analicemos lo que hicimos en el código.

Usamos la sintaxis del método val(), que toma una función. El parámetro valor nos dará el valor especificado del elemento, Hola, y luego se le agregará la cadena Mundo.

Use el método jQuery text() para cambiar el texto de la etiqueta

La función text() devuelve el contenido de texto de los elementos seleccionados. Funciona de la misma manera que innerText en JavaScript estándar para establecer o recuperar el contenido del elemento seleccionado.

Cuando desee mostrar el valor como texto sin formato, utilice el método text().

Sintaxis:

$(* selector*).text()

Esto devolverá el texto del elemento seleccionado.

$(* selector*).text(* content*)

Esto establecerá el texto del elemento seleccionado en el valor de contenido especificado.

$(*selector*).text(function*(index, currenttext)*)

Esto establecerá el texto del elemento seleccionado mediante el uso de una función. El parámetro index devuelve el índice del elemento, y el parámetro currenttext devuelve el contenido de texto del elemento, si lo hay.

Veamos cómo funciona el método text() para configurar o modificar el contenido de los elementos HTML.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("p").text("I am text() method.");
            });
        </script>
    </head>
    <body>
        <p></p>
    </body>
</html>

Producción:

jQuery Cambiar texto de etiqueta usando text () - Salida 1

El método text() establece el contenido de la etiqueta <p> como se muestra en la salida. Es lo mismo que si escribimos <p> Soy método text() </p>.

El método text() que usa la sintaxis de la función puede agregar el texto al contenido del elemento elegido. El valor se pasa al método text() como una cadena y usa esa cadena como el contenido de texto del elemento.

Si proporcionamos <h1>Hello World</h1> como parámetro en la función text(), asignará la cadena completa tal como está, y el resultado será el mismo que el valor pasado.

Observe el código a continuación para entenderlo claramente.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("p").text("<h1>I am text() method.</h1>");
            });
        </script>
    </head>
    <body>
        <p></p>
    </body>
</html>

Producción:

jQuery Cambiar texto de etiqueta usando text () - Salida 2

Use el método jQuery html() para cambiar el texto de la etiqueta

El HTML interior o el contenido del elemento seleccionado se establece o se devuelve mediante el método html() de jQuery. Puede contener elementos html en su cadena de entrada.

Sintaxis:

$(* selector*).html()

Devolverá el contenido del elemento seleccionado.

$(* selector*).html(* content*)

Establecerá el contenido del elemento seleccionado.

$(*selector*).html(function*(index,currentcontent)*)

Establecerá el contenido del elemento seleccionado usando una función. El parámetro currentcontent recupera el contenido HTML actual del elemento elegido, mientras que index devuelve la posición del índice del elemento dentro del conjunto.

Veamos los ejemplos de trabajo de la función html().

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("p").html("<h1>I am html() method.</h1>");
            });
        </script>
    </head>
    <body>
        <p>I am paragraph</p>
    </body>
</html>

Producción:

jQuery Cambiar texto de etiqueta usando html ()

Es necesario tomar nota de algunos detalles clave en el código y los resultados de este ejemplo. Primero, la etiqueta <p> ya contiene algo de contenido HTML, pero el método html() lo reemplaza por completo.

En segundo lugar, esta función mostraba el contenido de la etiqueta <h1> después de recibir la cadena con las etiquetas HTML como argumento, lo que indica que este método representó las etiquetas HTML y el texto.

Use el método jQuery append() para cambiar el texto de la etiqueta

El método append() añade el contenido proporcionado al final de los componentes que se han seleccionado. Podemos usar esta función para cambiar el contenido de los elementos HTML.

Discutamos los dos casos para entender su funcionamiento.

Añadir el texto

En este caso, examinaremos el procedimiento para agregar contenido nuevo al contenido existente del elemento HTML. Mira el código de abajo.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("p").append(" <b>I am Appended</b>.");
            });
        </script>
    </head>
    <body>
        <p>I am a paragraph.</p>
    </body>
</html>

Producción:

jQuery Cambiar texto de etiqueta usando append() - Caso 1

Observe la salida. El método append() agrega la cadena que proporcionamos al contenido actual de la etiqueta <p>.

Además, el método append() lee las etiquetas HTML junto con el texto a medida que definimos nuestro texto en la etiqueta <b>, que se usa para poner el texto en negrita, y el texto adjunto está en negrita.

Reemplazar el texto

Hemos visto agregar el texto, pero ¿qué pasa si queremos reemplazar el contenido del elemento HTML?

Veamos qué se nos ocurre. Verifique el código a continuación.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("p").empty();
                $("p").append("I am new paragraph.");
            });
        </script>
    </head>
    <body>
        <p>I am a paragraph.</p>
    </body>
</html>

Producción:

jQuery Cambiar texto de etiqueta usando append() - Caso 2

El código es fácil de entender. Llamamos al método .empty() en nuestro elemento, que elimina su contenido, luego llamamos al método append().

Artículo relacionado - jQuery Text