jQuery Cambiar Texto

Anika Tabassum Era 12 octubre 2023

jQuery jQuery Text

el método text() en jQuery
Use el método text() para cambiar el texto directamente usando jQuery
Use el método text() para cambiar el texto con eventos de clic usando jQuery

En jQuery, existen múltiples convenciones para resolver problemas en menos líneas de código. De manera similar, una adición es el método text().

el método `text()` en jQuery

Generalmente, la función text() devuelve el valor de texto de un elemento en particular cuando se aplica a su instancia. Supongamos que tenemos una etiqueta p con un mensaje: Es una línea.

Así que tenemos la sintaxis como esta:

<p id="line"> It's a line.</p>

Cuando aplicamos el método text() en la instancia, devolverá "It's a line.". La sintaxis es la siguiente:

$('#line').text();  // output = "It's a line."

En nuestros conjuntos de ejemplos, demostraremos cómo podemos modificar el texto existente con algo nuevo según las preferencias. Entonces, la primera instancia tendrá una implementación de cambio directo; el siguiente se llevará a cabo a través de un evento de clic. ¡Saltamos!

Use el método `text()` para cambiar el texto directamente usando jQuery

El método text() tomará el nuevo valor de texto como un parámetro de cadena para este ejemplo. También puede iniciar un valor dinámico de su voluntad.

Simplemente cambiará el valor del cuerpo HTML estático y la página de vista previa. Revisemos las cercas de código para examinar esto.

Fragmento de código:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    $('#title').text("New Text");
});
</script>
</head>
<body>
<p id='title'>Text</p>

Producción:

Use el método text() para cambiar el texto directamente - Salida 1

Use el método text() para cambiar el texto directamente - Salida 2

Use el método `text()` para cambiar el texto con eventos de clic usando jQuery

El procedimiento aquí será similar al anterior. Si hacemos la diferencia básica aquí, haremos un evento de clic para activar el efecto de cambio.

También veremos cómo el contenido del cuerpo HTML se sesga al hacer clic en el evento de clic. Saltemos a las líneas de código.

Fragmento de código:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
  $('#press').click(function(){
    $('#title').text("Text Altered");
});
  });
</script>
</head>
<body>
<p id='title'>Text</p>
<button id="press">Text Change</button>