JavaScript-Programmierung von Kopf bis Fuß

242 Kapitel 6

innerHTML benutzen

Finden Sie Ihr inneres HTML

Roter Alarm: vom

Phaser getroffen!

JavaScript-Konsole

Alles in Ordnung

JavaScript-Konsole

Und die Webseite

ändert sich ebenfalls!

innerHTML ist eine wichtige Eigenschaft, mit der wir den Inhalt eines Elements lesen

oder ersetzen können. Wenn Sie den Wert von innerHTML untersuchen, sehen Sie

den Inhalt, der sich innerhalb des HTML-Elements befindet, ohne die HTML-Tags.

Dieses »INNERhalb« ist der Grund dafür, dass die Eigenschaft innerHTML heißt. Wir

wollen uns den Inhalt des Elementobjekts in planet ansehen, indem wir den Wert der

Eigenschaft innerHTML auf der Konsole ausgeben. Hier die Ausgabe:

var planet = document.getElementById("gruener_planet");

console.log(planet.innerHTML);

Hier übergeben wir die Eigenschaft planet.

innerHTML zur Ausgabe an console.log.

Der Inhalt von innerHTML ist ein einfacher

String, der ganz normal auf der Konsole

ausgegeben werden kann.

Jetzt wollen wir den Wert von innerHTML ändern. Hierdurch ändern wir

tatsächlich den Inhalt des <p>-Elements mit der ID "gruener_planet".

Dadurch wird auch die Webseite aktualisiert.

var planet = document.getElementById("gruener_planet");

planet.innerHTML = "Roter Alarm: vom Phaser getroffen!";

console.log(planet.innerHTML);

Hier ändern wir den Inhalt des Elements, indem

wir der Eigenschaft innerHTML den String

»Roter Alarm: vom Phaser getroffen!« zuweisen.

Geben wir den Wert von

innerHTML auf der Konsole aus,

wird der neue Inhalt angezeigt.

Sie sind hier � 243

Interaktion mit der Webseite

Zeit für eine kleine Pause. Vielleicht sagen Sie sich gerade: »Moment, ich erinnere mich an

irgendwas mit IDs und Klassen, aber die Details sind mir nicht mehr so geläufig. Geht es da

nicht eher um CSS?« Kein Problem, wir frischen Ihr Wissen etwas auf, stellen es in einen

Kontext, und schon kann's weitergehen.

Hier ein Beispiel:

<div id="menu">

...

</div>

Sobald das sicher ist, können wir es mit CSS auswählen und mit Stilen versehen:

div#menu {

background-color: #aaa;

}

Und auch in JavaScript können wir über dessen ID auf das Element zugreifen:

Hier erhält das <div> die eindeutige ID »menu«. In

Ihrer Seite darf es keine anderen Elemente mit der

gleichen ID geben.

Der Selektor div#menu wählt das

<div>-Element mit der ID menu,

wodurch wir exakt diesem Element

bestimmte Stile zuweisen können.

div#menu ist ein

ID-Selektor.

<h3 class="drink">Erdbeer-Shake</h3>

<h3 class="drink">Zitronenlimonade</h3>

Beide <h3>-Elemente haben die

Klasse »drink«. Mit Klassen

können Sie Elemente zu einer

Gruppe zusammenfassen.

Außerdem gibt es noch eine weitere Möglichkeit, Elemente zu markieren: mit

Klassen. Mit Klassen können Sie mehrere Elemente auf einmal markieren, wie hier:

Mit HTML-IDs können wir ein Element eindeutig identifizieren. Dadurch können

wir es in CSS auswählen und mit Stilen versehen. Und auf die gleiche Weise können

wir das Element auch in JavaScript ansprechen.

Eine kleine Auffrischung

var myMenu = document.getElementById("menu");

Und wir können Elemente auch anhand ihrer Klasse auswählen – sowohl in CSS

wie auch in JavaScript. Wir werden bald sehen, wie Sie Klassen in JavaScript

einsetzen können. Übrigens: Falls Ihnen diese kleine Gedächtnisstütze nicht reicht,

empfehlen wir Ihnen Kapitel 7 aus unserem Lieblings-HTML & CSS-Handbuch

HTML und CSS von Kopf bis Fuß.