JavaScript und jQuery: Inhalt eines Elements mit innerHTML ersetzen

In diesem kleinen Minitutorial möchte ich euch zeigen, wie man das innere eines Elements in HTML mit JavaScript und jQuery durch einen beliebigen Inhalt ersetzen kann.

Angenommen, wir haben ein Element, zum Beispiel dieses DIV hier, das mit der id 'test' gekennzeichnet ist:

<div id="test">Alter Inhalt</div>

Nun möchten wir den Inhalt dieses Elements durch die Zeichenkette "Hello World" ersetzen. Dazu möchten wir uns eine Lösung mit JavaScript und eine Lösung mit jQuery ansehen.

Die JavaScript Lösung

document.getElementById("test").innerHTML = "Hello World";

In JavaScript können wir die Funktion getElementById() verwenden, um unser Element auszuwählen und mit der oben beschriebenen Weise den alten Inhalt durch "Hello World" ersetzen.

Die jQuery Lösung

$("#test").html("Hello World");

Einfacher ist es in jQuery. Hier reicht es, unser Element mit $("#test") auszuwählen und die Funktion html() zu benutzen, um das innerHTML dieses Elements zu ändern.