Modificar HTML, texto, atributos y clases con jQuery

Después de seleccionar elementos, jQuery ofrece métodos simples para leer o modificar su contenido y apariencia.

text()

text() trabaja con texto plano. No interpreta etiquetas HTML.

$("#mensaje").text("Hola");

También puede leer el valor actual:

const texto = $("#mensaje").text();

html()

html() permite leer o reemplazar el HTML interno de un elemento.

$("#contenedor").html("<strong>Importante</strong>");

No conviene insertar contenido no confiable porque podría introducir código HTML peligroso.

val()

val() obtiene o modifica el valor de campos de formulario.

const nombre = $("#nombre").val();

$("#nombre").val("Ana");

attr()

attr() lee o cambia atributos HTML.

const url = $("a").attr("href");

$("a").attr("title", "Ir al sitio");

prop()

prop() suele usarse para propiedades booleanas de controles, por ejemplo checked o disabled.

$("#acepto").prop("checked", true);

const marcado = $("#acepto").prop("checked");

Clases CSS

$("#panel").addClass("activo");
$("#panel").removeClass("oculto");
$("#panel").toggleClass("destacado");

addClass() agrega, removeClass() elimina y toggleClass() alterna una clase.

hasClass()

Permite comprobar si un elemento tiene una clase determinada.

if ($("#panel").hasClass("activo")) {
    console.log("El panel está activo");
}

css()

css() permite modificar estilos directamente, aunque para cambios complejos suele ser mejor alternar clases CSS.

$("#mensaje").css("color", "red");

append() y prepend()

append() agrega contenido al final y prepend() al principio.

$("#lista").append("<li>Nuevo</li>");
$("#lista").prepend("<li>Primero</li>");

remove()

remove() elimina el elemento seleccionado del DOM.

$(".mensaje-error").remove();

Ejercicio

Creá una tarjeta con título, texto y botón. Al hacer clic, modificá el texto, agregá una clase y cambiá un atributo.

Errores comunes

• usar html() cuando sólo necesitamos texto;
• usar attr() para propiedades booleanas que funcionan mejor con prop();
• aplicar muchos estilos inline en lugar de clases;
• olvidar que val() se usa principalmente con formularios.

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Selectores en jQuery: buscar y recorrer elementos del DOM

Eventos en jQuery: click, change, submit, keyup y on() →