JavaScript/DOM/Element/insertAdjacentHTML

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Element
Wechseln zu: Navigation, Suche

Die Methode Element.insertAdjacentHTML() fügt HTML im Umfeld des Elements ein, auf dem sie aufgerufen wird.

Dabei stehen vier mögliche Positionen zur Auswahl, von denen eine mit dem ersten Parameter der Methode ausgewählt werden muss:

  • auf gleicher Ebene, als Geschwister-Element
    • 'beforebegin': als direkter Vorgänger
    • 'afterend': als direkter Nachfolger
  • eine Ebene tiefer, als Kind-Element
    • 'afterbegin': als erstes Kind
    • 'beforeend': als letztes Kind

Syntax

neuesElement = element.insertAdjacentHTML(position, markup);

  • position: Bezeichnung der Einfügeposition wie oben beschrieben, als String
  • markup: HTML-Markup als plain text

Die Methode hat keinen Rückgabewert, wirft aber eine Exception, wenn das Einfügen fehlschlägt. Ein Fehlschlag ist möglich, wenn das neue HTML als Geschwisterelement eingefügt werden soll, das Bezugselement aber kein Parent-Element hat (z. B. weil es selbst noch nirgends eingefügt wurde).

Wird ein unbekannter Wert als Einfügeposition übergeben, wirft die Methode eine "SyntaxError" DOMException.

Empfehlung: Die insertAdjacentHTML()-Methode parst das Element, auf das sie angewendet wird, nicht.. Dadurch wird der zusätzliche Schritt der Serialisierung vermieden, was sie viel schneller macht als die direkte innerHTML-Manipulation.
Für das Einfügen von plain text bietet sich Node.textContent an.
Buttons mit insertAdjacentHTML einfügen ansehen …
 
function dropdownExtension () {
	const submenus = document.querySelectorAll('nav li > ul');
	for(let submenu of submenus) {
		submenu.classList.add('geändert');
		submenu.insertAdjacentHTML('beforebegin', `
			<button aria-expanded="false">
				<span class="visually-hidden">Untermenü aufklappen</span>
			</button>
		`);
    }
}

Mit querySelectorAll('li > ul') können wir nun alle Submenüs, die direkte Kinder eines li sind, finden. Die gefundenen Ergebnisse sind nun in einer node list, die mit for..of-Schleife jetzt für jeden Treffer den oben besprochenen Button mit insertAdjacentHTML einfügt.

Weblinks