.click() de jQuery adjunta un evento de clic a elementos seleccionados o lo desencadena, manejando eventos de forma compatible con todos los navegadores.
Leer másContenido.
Contenido.
El método .text() de jQuery se utiliza para obtener o establecer el contenido de texto de los elementos seleccionados. Este método se diferencia del método .html() en que solo afecta al contenido de texto y no incluye etiquetas HTML.
Definición:
El método .text() puede ser utilizado para recuperar el texto de los elementos seleccionados o para establecer el texto en ellos.
Sintaxis:
index.js
JavaScript
// Obtener el texto de los elementos seleccionados
$(selector).text();
// Establecer el texto en los elementos seleccionados
$(selector).text(textString);textString: Una cadena de texto que será establecida como el contenido de los elementos seleccionados.
Ejemplo:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .text() en jQuery</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#obtenerTextoBtn").click(function(){
var textoParrafo = $("#parrafo").text();
alert("El texto del párrafo es: " + textoParrafo);
});
$("#establecerTextoBtn").click(function(){
$("#parrafo").text("Este es el nuevo texto del párrafo.");
});
$("#actualizarListaBtn").click(function(){
$("#listaEjemplo li").text("Elemento de lista actualizado");
});
});
</script>
</head>
<body>
<h1>Ejemplo de .text()</h1>
<p id="parrafo">Este es el texto original del párrafo.</p>
<button id="obtenerTextoBtn">Obtener Texto del Párrafo</button>
<button id="establecerTextoBtn">Establecer Texto del Párrafo</button>
<ul id="listaEjemplo">
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
<li>Elemento de lista 3</li>
</ul>
<button id="actualizarListaBtn">Actualizar Texto de la Lista</button>
</body>
</html>
index.js
JavaScript
$("#obtenerTextoBtn").click(function(){
var textoParrafo = $("#parrafo").text();
alert("El texto del párrafo es: " + textoParrafo);
});
$("#establecerTextoBtn").click(function(){
$("#parrafo").text("Este es el nuevo texto del párrafo.");
});
$("#actualizarListaBtn").click(function(){
$("#listaEjemplo li").text("Elemento de lista actualizado");
});Explicación del Ejemplo:
- Al hacer clic en “Obtener Texto del Párrafo”, se muestra una alerta con el texto del párrafo.
- Al hacer clic en “Establecer Texto del Párrafo”, se cambia el texto del párrafo.
- Al hacer clic en “Actualizar Texto de la Lista”, se cambia el texto de todos los elementos de la lista con id
listaEjemplo.
Notas adicionales:
- Cuando se utiliza
.text()sin argumentos, devuelve el contenido de texto combinado de todos los elementos seleccionados. - Cuando se utiliza
.text(textString), establece el contenido de texto de cada elemento seleccionado al valor especificado portextString. - Este método puede ser útil para evitar inyecciones de HTML no deseadas, ya que establece solo texto, no HTML.
Resultado.
Este es el texto original del párrafo.
- Elemento de lista 1
- Elemento de lista 2
- Elemento de lista 3
Ejemplo avanzado:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo avanzado de .text() en jQuery</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#obtenerTextoAvanzadoBtn").click(function(){
var textoCombinado = $("#listaAvanzada li").text();
alert("El texto combinado de los elementos de lista es: " + textoCombinado);
});
$("#establecerTextoAvanzadoBtn").click(function(){
$("#listaAvanzada li").each(function(index){
$(this).text("Elemento de lista " + (index + 1));
});
});
});
</script>
</head>
<body>
<h1>Ejemplo avanzado de .text()</h1>
<ul id="listaAvanzada">
<li>Elemento de lista A</li>
<li>Elemento de lista B</li>
<li>Elemento de lista C</li>
</ul>
<button id="obtenerTextoAvanzadoBtn">Obtener Texto Combinado de la Lista</button>
<button id="establecerTextoAvanzadoBtn">Establecer Texto de la Lista Dinámicamente</button>
</body>
</html>
index.js
JavaScript
$("#obtenerTextoAvanzadoBtn").click(function(){
var textoCombinado = $("#listaAvanzada li").text();
alert("El texto combinado de los elementos de lista es: " + textoCombinado);
});
$("#establecerTextoAvanzadoBtn").click(function(){
$("#listaAvanzada li").each(function(index){
$(this).text("Elemento de lista " + (index + 1));
});
});Explicación del ejemplo avanzado:
- Al hacer clic en “Obtener Texto Combinado de la Lista”, se muestra una alerta con el texto combinado de los elementos de la lista con id
listaAvanzada. - Al hacer clic en “Establecer Texto de la Lista Dinámicamente”, se cambia el texto de cada elemento de la lista de forma dinámica, añadiendo un número basado en su índice
Resultado.
- Elemento de lista A
- Elemento de lista B
- Elemento de lista C
