jQuery Schnellstart – DOM Manipulation
In dieser Lektion lernst du das Document Object Model kennen.
Was ist DOM (Document Object Model)?
Wenn eine Webseite geladen wird, erstellt dein Browser ein sog. Dokument-Objektmodell (Document Object Model) der aufgerufenen Seite.
Mit dem Objektmodell erhält JavaScript (und somit jQuery) alle Möglichkeiten, die es zur Erstellung von dynamischem HTML benötigt:
- Du kannst alle HTML-Elemente der Seite ändern, hinzufügen & löschen
- Du kannst alle HTML-Attribute der Seite ändern, hinzufügen & löschen
- Du kannst alle CSS-Styles der Seite ändern, hinzufügen & löschen
- uvm.
Zusammenspiel von jQuery und DOM
jQuery bietet verschiedene Methoden zum Hinzufügen, Bearbeiten oder Löschen von DOM-Element(en) der HTML-Seite.
Die folgende Tabelle listet einige wichtige Methoden zum Hinzufügen/Entfernen neuer DOM-Elemente auf.
| Methode | Beschreibung |
|---|---|
| append() | Fügt den Inhalt an das Ende des Elements/der Elemente ein, das/die durch einen Selektor angegeben wird/sind. |
| before() | Fügt Inhalt (neue oder bestehende DOM-Elemente) vor einem oder mehreren Elementen ein, die durch einen Selektor angegeben werden. |
| after() | Fügt Inhalt (neue oder bestehende DOM-Elemente) nach einem oder mehreren Elementen ein, die durch einen Selektor angegeben werden. |
| prepend() | Inhalt am Anfang eines oder mehrerer durch einen Selektor spezifizierter Elemente einfügen. |
| remove() | Entfernt Element(e) aus dem DOM, das durch den Selektor angegeben wird. |
| replaceAll() | Ersetzt das/die Zielelement(e) durch das angegebene Element. |
| wrap() | Wickelt eine HTML-Struktur um jedes Element, das durch den Selektor angegeben wird. |
In den nächsten Lektionen lernst du die DOM-Manipulationsmethoden in der Praxis kennen.