Cambiar el texto de un elemento con jQuery
En lecciones anteriores aprendimos a obtener
un grupo de elementos a través de jQuery e incluso vimos
algunos ejemplos de trabajo con métodos. Ahora
analicémoslos con más detalle. En esta lección
aprenderemos a cambiar el texto de un elemento usando dos
métodos: html y
text.
Resolvamos la siguiente tarea: obtendremos todos los elementos
con la clase www y simultáneamente cambiaremos
el texto de todos ellos a '!!!'. Supongamos que tenemos
el siguiente código HTML:
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>
Entonces el código JavaScript se verá así:
let elems = document.getElementsByClassName('www');
for (let i = 0; i < elems.length; i++) {
elems[i].innerHTML = '!!!';
}
Con jQuery todo será mucho más simple: obtendremos
todos los elementos usando el símbolo de dólar, así:
$('.www'), y luego les aplicaremos el método
html,
que acepta como parámetro el nuevo
texto - $('.www').html('new text'). ¡Listo! Esta
línea hará todo el trabajo sin ciclos y
otras tonterías. Ejecute el ejemplo y compruébelo
usted mismo:
$('.www').html('!!!');
A todos los h3 usando el método html
establezca el texto '!!!'.