Das Wort »innerHTML«

Das Wort »innerHTML« steht für den Inhalt  des ihn enthaltenden Elements, also den Text zwischen  den Marken des Textes von »outerHTML« (etwas vereinfacht gesagt).

Dieser Name ist nicht  standardisiert, also kein Teil des W3C-DOM, aber er wird von allen verbreiteten Browsern implementiert, und es gibt einen Entwurf, der vorschlägt, es zur DOM -Spezifikation hinzuzufügen.

Beschreibung (hierarchical part)

developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Entwurf (hierarchical part)

w3c.github.io/DOM-Parsing/

innerHTML

Darstellung des Inhalts des enthaltenden Elements in HTML-Notation

Main.html

<span id="all">Es ist zur Zeit <span id="Zustand">(unbekannt)</span>.</span>

Auswertung mit dem Beispieldokument

Zustand.innerHTML

"(unbekannt)"

Hier folgt zum Vergleich eine Auswertung mit »outerHTML«.

Auswertung mit dem Beispieldokument

Zustand.outerHTML

"<span id="Zustand">(unbekannt)</span>"

Zuweisungen an »innerHTML«

Auschnitt der Anzeige des Dokuments im Browser

Es ist zur Zeit (unbekannt).

Der Eintrag »innerHTML« ist normalerweise nicht  schreibgeschützt. Es ist beliebt, Dokumente durch Zuweisungen an einen innerHTML-Eintrag zu ändern.

Auswertung

Zustand.innerHTML = "heiter"

"heiter"

Ausgabe mit »outerHTML«

Zustand.outerHTML

"<span id="Zustand">heiter</span>"

Auschnitt der Anzeige des Dokuments im Browser

Es ist zur Zeit heiter.

Die innere Text kann auch Elemente  enthalten.

Auswertung

Zustand.innerHTML = "heiter <em>oder</em> wolkig"

"heiter <em>oder</em> wolkig"

Wenn versucht wird, eine Zahl an den innerHTML-Eintrag zuzuweisen, so wird sie in einen Text gewandelt.

Auswertung

Zustand.innerHTML = 4

Auschnitt der Anzeige des Dokuments im Browser

Es ist zur Zeit 4.

Wenn ein Text an den innerHTML-Eintrag zugewiesen wird, so kann in der Regel derselbe Text später wieder aus dem innerHTML-Eintrag ausgelesen werden.

Auswertung

Zustand.innerHTML

"4"

Dank einer automatischen Umwandlung kann auch damit gerechnet werden, falls der Text ein Numerale ist.

Auswertung

Zustand.innerHTML * 3

Wenn es konkurrierende String-Operationen gibt, dann muß zum Rechnen aber erst in eine Zahl gewandelt werden.

Auswertung

+Zustand.innerHTML + 1

Übersicht

In der folgenden Übersicht steht »this« für das globale Verzeichnis und »window« für das globale Verzeichnis in einem Web-Browser.

Übersicht der Namen

 Name                                   Art           Bedeutung
 this.atob                              Funktion      Basis-64 nach Text
 this.Boolean                           Funktion      Darstellung als Wahrheitswert
 this.btoa                              Funktion      Text nach Basis-64
 this.decodeURIComponent                Funktion      URI-Text dekodieren
 this.encodeURIComponent                Funktion      Darstellung als URI-Text
 this.escape                            Funktion      ISO-8859-1 als URI-Text (veraltend)
 this.Infinity                          Zahl          Unendlich
 this.Math.PI                           Zahl          die Kreiszahl Pi
 this.Math.abs                          Funktion      Betrag
 this.Math.floor                        Funktion      Boden
 this.Math.hypot                        Funktion      Hypotenuse
 this.Math.isNaN                        Funktion      "ist NaN"
 this.Math.parseFloat                   Funktion      Zahl eines Numerales
 this.Math.max                          Funktion      Maximum
 this.Math.pow                          Funktion      Potenzieren
 this.Math.random                       Funktion      Zufallszahl
 this.Math.round                        Funktion      Runden
 this.Math.sin                          Funktion      Sinus
 this.Math.sqrt                         Funktion      Quadratwurzel
 this.Number                            Funktion      Darstellung als Zahl
 this.Number.prototype.toFixed.call     Funktion
 this.parseInt                          Funktion      Darstellung als Zahl
 this.String                            Funktion      Darstellung als String
 this.String.fromCharCode               Funktion      Text zu Kennzahlen
 String.prototype.codePointAt.call      Funktion      Kennzahl eines Zeichens
 this.String.prototype.substring.call   Funktion      Textausschnitt
 this.undefined                         Wert          "kein Wert"
 this.NaN                               Zahl          "keine Zahl"
 window.location.href                   Text          aktuelle Adresse
 window.navigator.userAgent             Text          Browser-Bezeichnung
 window.screen.height                   Zahl          Bildschirmhoehe
 window.screen.width                    Zahl          Bildschirmbreite
 window.<id>                            Verzeichnis   Element mit der Kennung <id>
<Element>.innerHTML                     Text          HTML-Quelltext des Inhalts
<Element>.outerHTML                     Text          HTML-Quelltext des Elements

Übungsaufgaben

/   Ändern des Dokuments

Quelltext des Beipieldokuments

<span>
  <span id="Anton">Anton</span>
  <span id="Berta">Berta</span>
  <span id="Dora">Dora</span>
  </span>

Ändern Sie das im Browser angezeigte Wort „Anton“ in „Anna“, indem Sie bei geladenem Beispieldokument eine (möglichst kurze) Zuweisung an einen innerHTML-Eintrag eingeben.

Reserveaufgaben

Hinweis für den Dozenten  ► Diese Reserveaufgabe werden in Kursen nur bearbeitet, wenn es noch Schwierigkeiten bei der Bearbeitung der voranstehenden Übungsaufgabe gab.

/   Ändern des Dokuments (1)

Hinweis für den Dozenten  ► Diese Reserveaufgabe sollte in Kursen erst nach der Nachbesprechung der vorigen Reserveaufgabe bearbeitet werden.

Ändern Sie das im Browser angezeigte Wort „Berta“ in „Bravo“, indem Sie bei geladenem Beispieldokument eine (möglichst kurze) Zuweisung an einen innerHTML-Eintrag eingeben.

/   Ändern des Dokuments (2)

Hinweis für den Dozenten  ► Diese Reserveaufgabe sollte in Kursen erst nach der Nachbesprechung der vorigen Übungsaufgabe bearbeitet werden.

Ändern Sie das im Browser angezeigte Wort „Dora“ in „Daniel“, indem Sie bei geladenem Beispieldokument eine (möglichst kurze) Zuweisung an einen innerHTML-Eintrag eingeben.

/   Erhöhen eines Numerales ⃖

Wir haben mit der Aufgabe „Erhöhen eines Numerales“ in der Lektion zur Wirkung von Zuweisungen schon geübt, wie ein Numerale vom Typ »string« erhöht werden kann. Nun wollen wir ein auf einer Webseite sichtbares  Numerale erhöhen.

Main.html

Zustand = <span id="Zustand">0</span>

Schreiben Sie eine Quelltextzeile, welche das Numerale im span-Element der obigen Seite um Sieben erhöht.

Geben Sie die Zeile mehrmals hintereinander ein und beobachten Sie, wie das Numerale, welches zunächst »0« lautet, entsprechend immer größer wird.

/   Einfügen eines Bildes

Fügen Sie durch eine (möglichst kurze) Zuweisung an einen innerHTML-Eintrag ein Bild in das Dokument ein.

Hierfür kann eine img-Startmarke eingefügt »<img src="https://userpage.fu-berlin.de/~fsisinologie/wp-content/uploads/2014/10/xinwen_button_crop.jpg">« werden.

Ersetzen Sie dann durch eine (möglichst kurze) Zuweisung an einen innerHTML-Eintrag das erste Bild durch ein anderes Bild.

/   Einfügen einer Zufallszahl

Fügen Sie durch eine (möglichst kurze) Zuweisung an einen innerHTML-Eintrag eine Zufallszahl in das Dokument ein.

Beim Wiederholen des Einfügens sollte eine andere Zufallszahl erscheinen.

/   Einfügen der Dokumentadresse

Fügen Sie durch eine (möglichst kurze) Zuweisung an einen innerHTML-Eintrag die Adresse des Dokuments, zu dem die verwendete JavaScript -Konsole gehört, ein, die dazu dem Verzeichnis »windows« entnommen werden sollte.