Wie kann ich mit JS ein div mit der zugehörigen ID erstellen?
Ich habe das Problem, dass ich mit dem Befehl:
document.getElementById("main_div").innnerHTML = "<div></div>"
ein neues div-Element (auf einer bereits leeren Seite) erstellen möchte. Das hat mit dem obenstehenden Befehl auch gut geklappt. Jetzt wollte ich aber dem div noch eine ID hinzufügen. Das habe ich wie folgt versucht:
document.getElementById("main_div").innnerHTML = "<div id="evaluation"></div>"
Das hat nicht geklappt. Ich gehe davon aus, dass das Problem bei den gedoppelten Anführungsstrichen liegt.
Gibt es dafür eine Lösung?
Danke im Voraus!
2 Antworten
Das liegt daran, dass JavaScript denkt du würdest den Text (String) schon mit dem ersten Anführungszeichen beenden. Wenn du also
document.getElementById("main_div").innnerHTML = "<div id="evaluation"></div>"
schreibst, dann ließt der JS-Parser zunächst
document.getElementById("main_div").innnerHTML = "<div id="
und kann das darauf folgende evaluation nicht verarbeiten.
Um zu signalisieren, dass die Anführungszeichen bei deiner ID Teil des Strings sein sollen, kannst du diese mit einem Backslash escapen:
document.getElementById("main_div").innnerHTML = "<div id=\"evaluation\"></div>"
Alternativ kannst du übrigens Elemente auch direkt im DOM (Document Object Model) erstellen:
const mainDiv = document.getElementById("main_div")
const newDiv = document.createElement("div")
newDiv.id = "evaluation"
mainDiv.appendChild(newDiv)
Ist mMn die bessere und weniger fehleranfälligere Variante.
Ich würde dir darüber hinaus empfehlen eine anständige IDE (Entwicklungsumgebung) zu verwenden. Dann werden dir so einfache Syntax-Fehler direkt angezeigt.
Verwende einfache Anführungszeichen:
document.getElementById("main_div").innnerHTML = '<div id="evaluation"></div>';