Révisions : modification du DOM avec jQuery

Une fois que vous avez trouvé une collection d'éléments en utilisant la fonction jQuery, vous pouvez les modifier en utilisant diverses méthodes.

Définir leur contenu textuel avec text() :
$("h1").text("Tout sur les chats"); (Voir un exemple)

Définir leur contenu HTML avec html() :
$("h1").html("J'<strong>adore</strong> les chats"); (Voir un exemple)

Définir leurs attributs avec attr() :
$(".image-chien").attr("src", "chien.jpg");
$(".lien-google").attr("href", "http://www.google.fr"); (Voir un exemple)

Modifier leurs styles CSS avec css() :
$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", color: "red"}); (Voir un exemple)

Ajouter un nom de classe avec addClass():
$("h1").addClass("attention");

Vous pouvez aussi créer de nouveaux éléments à partir de rien en passant une chaîne de HTML dans la fonction jQuery :
var $p = $("<p>");

Si vous le souhaitez, vous pouvez passer de l'HTML complet, en incluant les contenus des balises, les attributs et les styles.
var $p = $('<p style="color:red;">J'adore les gens qui adorent les chats.</p>');

Une fois que vous avez créé un élément, vous pouvez le modifier en utilisant une des méthodes ci-dessus :
$p.addClass("attention");

Puis, vous pouvez l'ajouter à un élément existant en utilisant append() :
$("#main-div").append($p); (Voir un exemple)

Vous pouvez aussi l'insérer dans une page en utilisant prepend() (Voir un exemple) ou appendTo() (Voir un exemple).

Lisez la documentation de jQuery pour obtenir plus de détails sur ces méthodes, en suivant les liens sur les noms des méthodes ci-dessus. Nous n'avons pas la possibilité de tout couvrir ici, et dans le développement Web, les meilleures pratiques varient constamment. Pour connaître les plus performantes, il vous faudra être à l'aise dans la lecture de documentation. Commencer à travailler cette qualité dès maintenant !