CSS, HTML und Javascript mit {stil}

Javascript innerHTML, outerHTML, textContent

innerHTML

Jedes HTML-Element hat die Eigenschaft innerHTML, die sowohl Inhalt als auch HTML-Tags zwischen dem öffnenden und schließenden Tag des Elements lesen und schreiben kann.

Die modernen Browser unterstützen zusätzlich outerHTML und insertAdjacent sowie textContent.

innerHTML wurde zuerst von den Browsern implementiert und erst von der WhatAG (in DOM Parsing and Serialization) und vom W3C in den Standard aufgenommen.

innerHTML

innerHTML ist bezaubernd intuitiv. Die Abfrage

var myId = document.getElementById('myId').innerHTML;

liefert den vollständigen String zwischen den öffnenden und schließenden Tags des Elements mit der id myId.

innerHTML einfügen
innerHTML löschen
Bezaubernd einfach
document.querySelector('#clear').onclick = function () {
	document.querySelector('#vanish').innerHTML = '';
}

Genauso einfach funktioniert der setter mit innerHTML:

document.getElementById('myId').innerHTML = 
   '<figure><img src="" … ><figcaption></figcaption></figure>';

innerHTML: nicht im DOM-Baum

Obwohl der Button innerHTML einfügen ebenfalls neu eingefügt wird, funktioniert er kein zweites Mal: Der eingefügte String ist ein nichts als eine Zeichenkette und kein Bestandteil des DOM-Baums.

innerHTML liest den Inhalt des Elements als Text und ändert den Inhalt als Text. Was mit innerHTML in das DOM eingefügt wird, wird als Zeichenkette interpretiert und kann nicht über das DOM angesprochen werden.

textContent

textContent agiert ähnlich wie innerHTML (IE ab IE9): textContent gibt den Inhalt eines Elements zurück oder setzt den Inhalt eines Elements. textContent wird aber nicht als HTML geparst, so dass die Seite oder das Element schneller aufgebaut sind.

textContent gibt ein literales Abbild des Inhalts mit Whitespace – Leerzeichen – und Zeilenumbrüchen zurück.

Agiert textContent als Setter, ersetzt elem.textContent den vollständigen Inhalt von elem durch Text – soweit funktioniert textContent genauso wie HTML.

Aber während der Wert von innerHTML als HTML interpretiert wird, wird textContent als Text interpretiert.

document.getElementById('elem').innerHTML = '<img src="img.jpg">';
document.getElementById('elem').textContent = '<img src="img.jpg">';

Mit innerHTML wird das Bild mit allen eventuellen CSS-Eigenschaften angezeigt, mit textContent der HTML-String <img src="img.jpg">

textContent wird von allen modernen Browsern einschl. IE9 unterstützt.

outerHTML

Schließt den Elementknoten ein




document.getElementById('clearOuter').onclick = function () {
	document.getElementById('outer').outerHTML = '';
}

innerHTML gibt's quasi immer schon. outerHTML wird von den jüngeren Browsern unterstützt.

Javascript innerHTML und outerHTML eignen sich für schnelle Tests, wenn komplexe Strukturen im DOM umgebaut werden.

console.log ('outer ' + outer)

Einfügen mit insertAdjacentHTML

insertAdjacentHTML (insertionPoint, htmlText)

insertAdjacentHTML parst einen String als HTML und fügt die gefundenen Knoten in den DOM-Baum an der Stelle insertionPoint ein.

Javascript insertAdjacentHTML

insertAdjacentHTML spart viel Arbeit.

insertAdjacentHTML wird von allen modernen Browsern (auch IE 8) unterstützt. insertionPoint kann vier Werte für die Position im DOM annehmen:

  • beforebegin
  • afterbegin
  • beforeEnd
  • afterEnd
<script type="text/javascript">
var node = document.getElementById('node');
node.insertAdjacentHTML('beforebegin','<p>beforebegin hier einfügen</p>');
node.insertAdjacentHTML('afterbegin','<p>afterbegin hier einfügen</p>');
node.insertAdjacentHTML('beforeend','<p>beforeend hier einfügen</p>');
node.insertAdjacentHTML('afterend','<p>afterend hier einfügen</p>');
} 
</script>