SelektorGagdet ist ein nettes kleines JavaScript Tool, welches einem genau diese Arbeit abnimmt. Alles was man braucht ist ein Bookmark auf deren JS Code und schon lädt der Browser deren Open Source Selektoren Tool. Jetzt kann man sich einfach seinen Selektor bequem zusammenklicken und SelectorGadget generiert den dazu passenden Query.

Ich finde das erleichtert einem die Arbeit ungemein und mal unter uns: Manchmal bin ich auch einfach zu faul den Selektor manuell zu schreiben ;-)

Folgendes war meine Ausgangssituation:
[code lang='xhtml']

[/code]
In dieses div Snippet wollte ich nun ein weiteres DIV Element mit der id contentIntroduction einfügen. Dabei sollte dieses div genau zwischen die zwei bestehenden divs navigation und content eingefügt werden. Ein kurzer Blick in die Prototype API führte dann auch gleich die Element.insert Methode zu Tage. Leider ist die Dokumentation an dieser Stelle ein wenig dürftig, weshalb ich zunächst auch etwas rumprobieren musste, bis ich es wirklich verstanden habe.

Für mein beschriebenes Problem müsste die Prototype Variante also folgendermaßen aussehen.
[code lang='xhtml']
var contentIntroductionElement = new Element('div', {
'id' : 'contentIntroduction',
'class': 'intro',
}).update('This is a simple and short content introduction');

var contentElement = $('navigation');

Element.insert(contentElement, {'after': contentIntroductionElement});
[/code]

Zu lesen ist das Ganze folgendermaßen. Klasse Element, hole Dir das DOM-Element navigation und füge danach das DOM-Element contentIntroductionElement ein. Es muss natürlich nicht nur before sein. Prototype lässt auch before, top und bottom zu.

Das Ergebnis sind dann folgendermaßen aus:
[code lang='xhtml']

[/code]