Bücher online kostenlos Kostenlos Online Lesen
JQuery Kochbuch (German Edition)

JQuery Kochbuch (German Edition)

Titel: JQuery Kochbuch (German Edition) Kostenlos Bücher Online Lesen
Autoren: jQuery Community Experts
Vom Netzwerk:
Elemente, bearbeiten sie und fügen sie dann mit der Bearbeitungs-Methode
appendTo()
in das DOM ein:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









    Beachten Sie, wie wir hier die Methode
end()
nutzen, um die Methode
find()
rückgängig zu machen. Wenn nun ein Aufruf von
appendTo()
erfolgt, wird alles angehängt, was ursprünglich im ersten Wrapper-Set enthalten war.
    Diskussion
    In diesem Rezept haben wir der jQuery-Funktion einen HTML-String übergeben, aus dem DOM-Elemente erzeugt wurden. Es ist auch möglich, der jQuery-Funktion ein DOM-Objekt zu übergeben, das von der DOM-Methode
createElement()
erzeugt wurde:
jQuery( document.createElement('p') ).appendTo('body'); //hängt ein leeres p-Element an die
     //Seite an
    Das kann natürlich ziemlich mühsam sein, wenn doch ein HTML-String mit mehreren Elementen wunderbar funktioniert.
    Es sei darauf hingewiesen, dass wir hier bezüglich der Bearbeitungs-Methoden mit
appendTo()
nur an der Oberfläche gekratzt haben.Neben
appendTo()
gibt es noch folgende Bearbeitungs-Methoden:
    append()
prepend()
prependTo()
after()
before()
insertAfter()
insertBefore()
wrap()
wrapAll()
wrapInner()

Entfernen von DOM-Elementen
    Problem
    Sie wollen Elemente aus dem DOM entfernen.
    Lösung
    Die Methode
remove()
kann genutzt werden, um ein selektiertes Set an Elementen und deren Kind-Elemente aus dem DOM zu entfernen. Schauen Sie sich einmal den folgenden Code an:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Anker


Anker-Element
Anker-Element
Anker-Element




    Wenn dieser Code in den Browser geladen wird, werden die Anker-Elemente auf der Seite bleiben, bis der JavaScript-Code ausgeführt wird. Nach dem Aufruf der Methode
remove()
verbleibt auf der Seite nur noch ein


-Element.
    Es ist auch möglich, der Methode einen Ausdruck mitzugeben, um das Element-Set zu filtern, das entfernt werden soll. So könnte zum Beispiel unser Code so geändert werden, dass er nur noch Anker mit einer bestimmten Klasse entfernt:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





Anker


Anker-Element
Anker-Element
Anker-Element




    Diskussion
    Nutzt man die jQuery-Methode
remove()
, muss man zwei Dinge bedenken:
    Die Elemente werden zwar mit
remove()
aus dem DOM entfernt, aber nicht aus dem jQuery-Wrapper-Set. Das bedeutet, dass Sie theoretisch mit ihnen weiterarbeiten und sie sogar bei Bedarf wieder im DOM einfügen könnten.
Diese Methode wird nicht nur die Elemente aus dem DOM entfernen, sondern auch alle Eventhandler und intern gepufferten Daten, die die entfernten Elemente enthalten haben könnten.

DOM-Elemente ersetzen
    Problem
    Sie müssen Knoten, die sich gerade im DOM befinden, durch neue DOM-Knoten ersetzen.
    Lösung
    Mit der Methode
replaceWith()
können wir eine Menge von DOM-Elementen ersetzen. Im folgenden Code-Beispiel nutzen wir
replaceWith()
,um alle

  • -Elemente mit einem Attribut
    class
    mit dem Wert
    remove
    durch eine neue DOM-Struktur zu ersetzen:
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">