Wiederholung: DOM-Modifikationen mit jQuery

Wenn du mit der Funktion jQuery eine Collection von Elementen gefunden hast, kannst du diese mit verschiedenen Methoden verändern.

Verändere den inneren Text mit text():
$("h1").text("Alles über Katzen"); (Siehe Beispiel)

Verändere das innere HTML mit html():
$("h1").html("Ich <strong>liebe</strong> Katzen"); (Siehe Beispiel)

Verändere Attribute mit attr():
$(".dog-pic").attr("src", "dog.jpg");
$(".google-link").attr("href", "http://www.google.com"); (Siehe Beispiel)

Verändere CSS Styles mit css():
$("h1").css("font-family", "monospace");
$("h1").css({"font-family": "monospace", "color": "red"}); (Siehe Beispiel)

Füge einen Klassennamen hinzu mit addClass():
$("h1").addClass("warning");

Du kannst ebenfalls neue Elemente erstellen, indem du der Funktion jQuery einen HTML-String übergibst:
var $p = $("<p>");

Du kannst sogar das ganze HTML inklusive Inhalt der Tags, Attributen und Styles übergeben.
var $p = $('<p style="color:red;">I mag Menschen welche Katzen mögen.</p>');

Sobald du ein Element erstellt hast, kannst du es mit den oben gezeigten Methoden verändern:
$p.addClass("warning");

Und dann kannst du es einem bestehen Element anhängen mit der Funktion append():
$("#main-div").append($p); (Siehe Beispiel)

Du kannst es auch einer Webseite hinzufügen mit prepend() (Siehe Beispiel) oder appendTo() (Siehe Beispiel).

Lies die jQuery-Dokumentation für weitere Details zu den einzelnen Methoden mit den oben verlinkten Methodennamen. Wir können hier nicht alles behandeln und da die besten Praktiken der Web-Entwicklung sich schnell ändern, musst du dir angewöhnen, dich mit dem Lesen der Dokumentation auf dem neuesten Stand der Entwicklung zu halten. Es ist gut, damit gleich jetzt zu beginnen!