JS + jQuery: HTML-Elemente einzufügen
Autor: Ralf v.d.Mark
eingetragen: Freitag, 30. Juni 2023 um 10:26 Uhr (26/2023 Kalenderwoche)
geändert: Freitag, 30. Juni 2023 um 10:42 Uhr (26/2023 Kalenderwoche)
Keywords: HTML jquery Elemente einfügen addElement
Kategorien: HTML, JavaScript,
Text:
In ein bestimmtes HTML-Element mit einer ID ein neues HTML-Tag einfügen.
dasElement.insertAdjacentElement('afterbegin', 'neues Element');
Die Methode insertAdjacentElement() fügt einen bestimmten Elementknoten an einer bestimmten Position relativ zu dem Element ein, für das sie aufgerufen wird.
Position
Ein DOMString, der die Position relativ zum Element darstellt; muss eine der folgenden Zeichenfolgen sein:
beforebegin: Vor dem Element selbst.
afterbegin: Direkt innerhalb des Elements, vor seinem ersten untergeordneten Element.
beforeend: Direkt innerhalb des Elements, nach seinem letzten untergeordneten Element.
afterend: Nach dem Element selbst.
Element
Das Element, das in den Baum eingefügt werden soll.
Quellen:
https://stackoverflow.com/questions/2007357/how-to-set-dom-element...
https://www.w3schools.com/jsref/propelementfirstelementchild.asp
Quellcode:
<div id="elementId1">Hier wird mit jQuery eingefügt...</div>
<div id="elementId2">Hier wird mit nativem JavaScript eingefügt...</div>
<script>
$("#elementId1").prepend("<h2>JS: Neue Überschrift!!</h2>");
function createHtmlElement(htmlTag, text) {
let element = document.createElement(htmlTag);
element.textContent = text;
return element;
}
if (document.getElementById('elementId2')) {
//Wenn es ein Suchformular ist, dann Überschrift einfügen...
console.log('Formular mit der ID "elementId2" gefunden!');
const filterform = document.getElementById('elementId2');
filterform.insertAdjacentElement('afterbegin',
createHtmlElement('h2', 'JS: Meine neue Überschrift!'));
console.log('Ende der JS-Funktion');
}
</script>