Was mache ich in Javascript mit getElementById falsch?
Ich versuche mit document.createTextNode einen Text in Javascript auszugeben. Doch der Zugriff auf mein HTML Objekt <a id="Textid"></a> funktioniert nicht. Die Browser-Konsole gibt immer
Uncaught TypeError: document.getElementById(...) is null
aus. Ich werde daraus aber nicht richtig schlau. Kann mir jemand weiterhelfen?
var Text = document.createTextNode('Das ist der Text');
document.getElementById('Textid').appendChild(Text);
Führst du das ganze vielleicht zu früh aus, bevor der DOM aufgebaut ist? Was kommt denn raus, wenn du das get... direkt in der Konsole eingibst?
Ja, das war das Problem.
3 Antworten
Ohne den kompletten Code können wir nur raten. Der „beliebteste“ Fehler ist der, dass Elemente per Javascript angesprochen werden, die noch gar nicht im DOM drin sind:
<script>
let test = document.getElementById("test");
console.log(test); // null
</script>
<div>
<p id="test">Qui quae quae aliquam est aliquam …</p>
</div>
Wenn document.getElementById("test") aufgerufen wird, gibt es das entsprechende Element noch gar nicht, da es erst weiter unten erzeugt wird.
Die einfachste Lösung ist, den Script-Code nach unten (am besten direkt vor das schließenden </body> zu setzen:
<body>
<div>
<p id="test">Qui quae quae aliquam est aliquam …</p>
</div>
<script>
let test = document.getElementById("test");
console.log(test); // [object HTMLParagraphElement]
</script>
</body>
Alternativ kannst du den Script-Code auch erst dann ausführen, wenn der DOM vollständig geladen wurde:
<script>
document.addEventListener("DOMContentLoaded", () => {
let test = document.getElementById("test");
console.log(test); // [object HTMLParagraphElement]
});
</script>
<div>
<p id="test">Qui quae quae aliquam est aliquam …</p>
</div>
Der eingegebene Code ist leider nicht richtig. Du möchtest gerne einen Text hinzufügen das kannst du so machen:
var text = "Das ist der Text";
document.getElementById('textID').textContent = text;
Das Element existiert nicht. Womöglich wird dein Script ausgeführt bevor das DOM fertig geladen ist oder das Element ist schlicht nicht im Dokument vorhanden.