JavaScript/DOM/Element/insertAdjacentHTML
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.
Für das Einfügen von plain text bietet sich Node.textContent an.
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.
