HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 75

DOM-Manipulation

.prepend(code) und .append(code)

2

.append() wird genutzt, um HTML-Code mit jQuery am Ende eines Elements einzufü-
gen. Der entsprechende HTML-Schnipsel wird als String, also in Textform, in der
Klammer übergeben. Beachten Sie, dass der Codeschnipsel gültig sein muss, das
heißt, Tags geschlossen sein müssen.

$('h1').append('<button>Klick mich!</button>');
// ergibt:
// <h1>Hallo Welt<button>Klick mich!</button></h1>

Analog dazu funktioniert .prepend() , die Funktion fügt den übergebenen Schnipsel
am Anfang des Elements ein.

$('h1').prepend('<button>Klick mich!</button>');
// ergibt:
// <h1><button>Klick mich!</button>Hallo Welt</h1>

.before(code) und .after(code)

Wie bei .append() und .prepend() fügen die Funktionen .before() und .after() HTML-
Code in das Dokument ein. Allerdings nicht innerhalb des selektierten Elements, son-
dern direkt davor bzw. dahinter:

$('h1').before('<button>Klick mich!</button>');
// ergibt:
// <button>Klick mich!</button><h1>Hallo Welt</h1>

$('h1').after('<button>Klick mich!</button>');
// ergibt:
// <h1>Hallo Welt</h1><button>Klick mich!</button>

.wrap(code)

Gelegentlich müssen Elemente von einem anderen Element umschlossen werden,
das zur Laufzeit noch nicht im Quellcode existiert. An dieser Stelle kommt die .wrap -
Funktion zum Einsatz: Sie umschließt jedes der mit $() selektierten Objekte mit dem
als Parameter übergebenen Element:

$('h1').wrap('<header></header>');
// ergibt:
// <header>
// <h1>Hallo Welt</h1>