CSS, HTML und Javascript mit {stil}

Javascript outerHTML, textContent: Inhalt von Elementen lesen und ändern

outerHTML und 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.

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

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

var content = document.querySelector(elem).textContent;

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

document.querySelector(elem).textContent = 'Neuer Inhalt';

textContent vs innerHTML

Während der Wert von innerHTML als HTML geparst wird, interpretiert Javascript textContent als Text.

document.getElementById('c1').innerHTML = 
   '<p>Mit innerHTML</p><img src="onerror.svg">';
document.getElementById('c2').textContent = 
   '<p>Mit textContent</p><img src="onerror.svg">';

innerHTML zeigt das Bild mit allen eventuellen CSS-Eigenschaften an, textContent die Zeichenkette <img src="img.jpg">

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

outerHTML

outerHTML ist das HTML eines Elements mitsamt dem Element selber. outerHTML schließt also den Elementknoten ein – das ist der Unterschied zur Eigenschaft innerHTML eines Elements, das aus dem HTML innerhalb der öffnenden und schließenden Tags besteht.




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

Wird die outerHTML-Eigenschaft eines Elements als Setter benutzt und mit einem leeren String überschrieben, wird das Element aus dem DOM und auch aus dem Speicher entfernt.

console.log (document.getElementById("outer")) // gibt null zurück

innerHTML gibt's quasi immer schon. outerHTML wird von den jüngeren Browsern unterstützt. Sowohl innerHTML als auch outerHTML eignen sich für schnelle Tests in der Konsole des Browsers, wenn komplexe Strukturen im DOM umgebaut werden.

console.log ('outer ' + outer)

outerHTML als Wrapper

Weil outerHTML der Inhalt eines Elements mitsamt dem Element selbst ist, eignet sich outerHTML als Wrapper. Wenn ein Element oder ein ganzes Fragment z.B. in ein div-Element gepackt werden sollen:

<style>
.wrapper { border:2px solid gainsboro }
</style>

<figure id="inner">
   <svg class="summer"><use xlink:href="#summer" /></svg>
   <div class="demo"><button id="wrap">Wrap in DIV</button></div>
</figure>

<script>
document.getElementById("wrap").onclick = function () {
   var inner = document.getElementById("inner");
   inner.outerHTML = "<div class='wrapper'>" + inner.outerHTML + "</div>";
}
</script>

Der Button wirkt allerdings kein zweites Mal – beim Ersetzen des Inhalts verliert outerHTML die Referenz für das button-Element – auch wenn der neu erzeugte Button genauso aussieht wie der ursprüngliche.

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>
outer HTML