If you're seeing this message, it means we're having trouble loading external resources on our website.

Si estás detrás de un filtro de páginas web, por favor asegúrate de que los dominios *.kastatic.org y *.kasandbox.org estén desbloqueados.

Contenido principal

Revisión: modificación del DOM con jQuery

Una vez que hayas encontrado una colección de elementos al usar la función de jQuery, puedes cambiarlos al usar varios métodos.
Establece su texto interior con text():
$("h1").text("Todo acerca de los gatos"); (Ver ejemplo)
Establece su html interior con html():
$("h1").html("Me <strong>encantan</strong> los gatos"); (Ver ejemplo)
Establece atributos con attr():
$(".dog-pic").attr("src", "dog.jpg");
$(".google-link").attr("href", "http://www.google.com"); (Ver ejemplo)
Cambia los estilos CSS con css():
$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", "color": "red"}); (Ver ejemplo)
Agrega un nombre de clase con addClass():
$("h1").addClass("warning");
También puedes crear nuevos elementos desde cero al pasarle una cadena de HTML a la función jQuery:
var $p = $("<p>");
Si quisieras, podrías pasarle el HTML completo, incluyendo etiquetas de contenido, atributos y estilos.
var $p = $('<p style="color:red;">Me encanta la gente que ama a los gatos.</p>');
Una vez que hayas creado un elemento, puedes modificarlo al usar cualquiera de los métodos de arriba:
$p.addClass("warning");
Después puedes anexarlo a un elemento existente al usar append():
$("#main-div").append($p); (Ver ejemplo)
También puedes insertarlo en la página al usar prepend() (Ver ejemplo) o appendTo() (Ver ejemplo).
Lee la documentación de jQuery para más detalles sobre cada uno de estos métodos, al seguir los nombres de los métodos vinculados arriba. No podremos cubrir todo aquí, y como las mejores prácticas de desarrollo web cambian rápido, tendrás que ser bueno leyendo la documentación para mantenerte al día en lo más reciente y en lo mejor. ¡Es bueno empezar a trabajar en esa habilidad ahora!

¿Quieres unirte a la conversación?

¿Sabes inglés? Haz clic aquí para ver más discusiones en el sitio en inglés de Khan Academy.