DOM-Elemente erstellen, bearbeiten und einfügen
Problem
Sie wollen ein oder mehrere neue DOM-Elemente erstellen, die direkt selektiert sind, um sie dann zu bearbeiten und in das DOM einzufügen.
Lösung
Vielleicht haben Sie es noch nicht bemerkt: Die
jQuery-Funktion
besitzt viele Facetten. Sie verhält sich abhängig vom Aufbau der
Parameter sehr unterschiedlich. Übergeben Sie der Funktion einen
Text-String mit HTML-Code, dann werden diese Elemente direkt
erzeugt. So wird zum Beispiel mit der folgenden Anweisung ein
<a>-Element innerhalb eines
<p>-Elements erstellt, wobei
sich ganz innen noch ein Textknoten befindet:
jQuery('<p><a>jQuery</a></p>');
Mit den so erzeugten Elementen können Sie nun
jQuery-Methoden nutzen, um damit zu arbeiten. Es ist so, als ob Sie
das neue <p>-Element in einem
bestehenden HTML-Dokument selektiert hätten. So könnten wir zum
Beispiel mit dem <a> arbeiten,
indem wir die Methode .find() nutzen,
um das Element
<a> zu selektieren und dann
eines seiner Attribute zu setzen. Mit dem folgenden Code setzen wir
das Attribut href auf den Wert
http://www.jquery.com:
jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com');
Das ist klasse, oder? Nun, es wird noch besser,
denn bisher haben wir nur spontan Elemente erzeugt und bearbeitet.
Wir haben aber noch nicht das aktuell geladene DOM geändert. Dazu
müssen wir die Bearbeitungsmethoden von jQuery nutzen. Im Folgenden
sehen Sie unseren Code im Kontext eines HTML-Dokun ments. Dabei
erzeugen wir Elemente, bearbeiten sie und fügen sie dann mit der
Bearbeitungs-Methode appendTo() in das
DOM ein:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/JavaScript"> jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.jquery.com') .end().appendTo('body'); </script> </body> </html>
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()