jQuery: Den Dokumentenbaum manipulieren

Standard

Letztes Mal ging’s darum, wie man DOM-Elemente in jQuery auswählen kann. Dieses Mal werfen wir einen Blick darauf, wie man den Dokumentenbaum ändern kann.

In den letzten Folgen haben wir bereits einige Methoden kennengelernt:

  • text – ändert den Textinhalt eines Elements.
  • toggle – macht ein Element sichtbar, wenn es zuvor unsichtbar war, und umgekehrt.

Inhalte einfügen

Die Methoden zur Änderung der Inhalte (html und text) haben wir bereits in den letzten Folgen kennengelernt. Viel mehr Methoden gibt es, um neue Inhalte in den Dokumentenbaum einzufügen. In der jQuery-Dokumentation findet man Details über die Methoden zur Manipulation des Dokumentbaumes.

Dieses Beispiel demonstriert das Kopieren von Elementen von einem Quell- in einen Zielbereich. Der JavaScript-Code dafür sieht so aus:

    $(document).ready(function() {
      $("#changeButton").click(function() {
        $(".target").empty();
        $(".source").appendTo(".target");
      });
    });

Die Methode empty löscht alle Kindelemente der ausgewählten Elemente. In unserem Fall sind das alle Elemente, die mit der CSS-Klasse “target” ausgezeichnet wurden. In Zeile 4 wird der Inhalt aller Elemente mit der CSS-Klasse “source” verkettet und in alle Elemente mit der CSS-Klasse “target” eingefügt.

Subelemente ersetzen

Im nächsten Beispiel wird der Button durch ein DIV-Element ausgetauscht. Der JavaScript-Code sieht folgendermaßen aus:

    $(document).ready(function() {
      $("#replacingButton").click(function() {
        $(this).replaceWith("Hello, world!");
      });
    });

Subelemente löschen

Weiter oben hatten wir bereits ein Beispiel, in dem mit empty() alle Subelemente gelöscht wurden. Mit der Methode remove werden alle selektierten Elemente aus dem Dokumentenbaum entfernt. Die Objekte bleiben erhalten und selektiert, d.h. man kann die entfernten Elemente noch in verketteten Methodenaufrufen verwenden. Im obigen Beispiel haben wir Elemente kopiert. Ich habe das Beispiel ein wenig modifiziert, um die Elemente nicht nur zu kopieren, sondern zu verschieben:

    $(document).ready(function() {
      $("#changeButton").click(function() {
        $(".target").empty();
        $(".source").remove().appendTo(".target");
      });
    });

Elemente klonen

Die Methode clone() erstellt einen Klon der ausgewählten Elemente und selektiert die Klons für weitere Methodenaufrufe. Ein optionaler Parameter vom Typ bool gibt an, ob Eventhandler ebenfalls geklont werden sollen. Der voreingestellte Wert ist false.

Ich habe das obige Beispiel ein weiteres Mal modifiziert:

    $(document).ready(function() {
      $("#changeButton").click(function() {
        $(".source")
          .clone()
          .removeClass("source")
          .addClass("target")
          .appendTo("body");
      });
    });

Zuerst werden alle Elemente mit der CSS-Klasse “source” selektiert und geklont. Der Wert des Attributs class aller Klone wird so modifiziert, dass die Klasse “source” nicht mehr vorhanden ist (Methode removeClass()) und die Klasse “target” hinzugefügt wird (Methode addClass()). Die Methode appendTo fügt dann die Klone in das body-Element ein.

Mehr Details zu den Methoden addClass() und removeClass() gibt’s in der jQuery-Dokumentation.

Weitere Methoden

jQuery kennt natürlich noch mehr Methoden, die den Dokumentenbaum manipulieren. Die jQuery-Dokumentation enthält Details dazu.

Zusammenfassung

jQuery bietet jede Menge Methoden an, um den Dokumentenbaum zu manipulieren. Inhalte können geändert, eingefügt, gelöscht, ersetzt und kopiert werden.

In der nächsten Folge werde ich mich mit den in jQuery eingebauten Effekten beschäftigen.