Mit der html()-Funktion ermöglicht jQuery das bequeme Ändern von Elementinhalten. Doch manchmal genügt das nicht.

Beispiel

<p class="Peter">„Wo ist meine Kamera?“</p>
<p class="Anna">„Woher soll ich das wissen?“</p>
<p class="Peter">„Weil du doch immer alles weißt?“</p>
<p class="Anna">„Wer sagt das?“</p>
<script>
$(document).ready( function() {
	$(".Peter").mouseover( function() {
		$(this).prepend('<b id="Peter">Peter: </b>');
	} );
	$(".Peter").mouseout( function() {
		$("#Peter").remove();
	} );
	$(".Anna").mouseover( function() {
		$(this).prepend('<b id="Anna">Anna: </b>');
	} );
	$(".Anna").mouseout( function() {
		$("#Anna").remove();
	} );  
} );
</script>

Erläuterung

Das Beispiel zeigt einen Dialog. An den Klassennamen der p-Elemente ist zwar erkennbar, wer was sagt, aber im ausgegebenen Inhalt auf der Webseite ist das natürlich nicht sichtbar. Das Script unterhalb des Dialogs tut folgendes: Immer wenn der Anwender mit der Maus über den Anzeigebereich eines der p-Elemente fährt (mouseover-Ereignis), wird im Fall von ".Peter" (also bei Elementen mit class="Peter") am Anfang des Elementinhalts der HTML-Code <b id="Peter">Peter: </b> eingefügt, und im Fall von ".Anna" (also bei Elementen mit class="Anna") der Code <b id="Anna">Anna: </b>. Wenn die Maus des Anwenders den Anzeigebereich wieder verlässt (mouseout-Ereignis), wird das Element mit der id Peter bzw. Anna, selektiert mit $("#Peter") bzw. $("Anna"), wieder entfernt. Dazu wird die Funktion remove() auf das ausgewählte Element angewendet.

Die Funktion zum Einfügen lautet im Beispiel prepend(). Es gibt in jQuery auch ein Gegenstück dazu, nämlich append(). Während prepend() den Inhalt am Anfang gefundener Elemente einfügt, fügt die Funktion append() den Inhalt am Ende ein.

Die Funktionen prepend() und append() werden im Beispiel auf den this-Selektor angewendet. Welches Element dahinter steckt, wird durch die Bindung des mouseover-Ereignisses bestimmt. Der einzufügende Inhalt wird prepend() als Parameter übergeben.

Sie können an Funktionen wie prepend() und append() aber nicht nur HTML-Inhalt übergeben, sondern auch einen Selektor.

Mit der html()-Funktion ermöglicht jQuery das bequeme Ändern von Elementinhalten. Doch manchmal genügt das nicht.

Beispiel

<p id="Text1">Der alte Mann </p>
<span id="Text2">und das Meer</span>
<script>
$(document).ready( function() {
   $("#Text1").append( $("#Text2") );  
} );
</script>

Erläuterung

Das kleine Script verändert das HTML-DOM oberhalb so, dass dieses anschließend folgendem Code entspricht:

<p id=”Text1”>Der alte Mann <span id="Text2">und das Meer</span></p>