Lösung: Javascript-Error “Cannot read property ‘appendChild’ of null”

Wenn man mit Javascript Elemente an das aktuelle Dokument anhängen möchte, kommt es unter Umständen zu diesem Fehler. Das passiert, wenn das Skript ausgeführt wird, bevor das Dokument komplett geladen wurde. Möchte man dann mit der Funktion appendChild() etwas an das DOM anhängen, zeigt unter anderem der Chrome Browser diese Fehlermeldung:

“Uncaught TypeError: Cannot read property ‘appendChild’ of null”

oder:

“Cannot call method ‘appendChild’ of null”

Als Lösung muss man dafür sorgen, dass das Javascript erst dann ausgeführt wird, wenn die Seite komplett geladen wurde und das DOM komplett erstellt ist. Erst dann kann man per Javascript Elemente zum DOM hinzufügen oder daraus entfernen.

Damit das Skript erst nach dem Einladen der Seite ausgeführt wird, kann man es ganz unten auf der Seite platzieren. Sinnvoller ist aber, den Code in eine Funktion zu setzen, die erst nach dem kompletten Laden ausgeführt wird: Das geht in Javascript mit “window.onload”.

Der Code, um per appendChild() etwas zum DOM hinzuzufügen, könnte dann so aussehen:

window.onload = neuerdiv();
function neuerdiv(){
	var div=document.createElement('div');
	div.id='neuerdiv';
	document.body.appendChild(div);
}

Durch die Funktion, die erst bei “window.onload” geladen wird, wird der Fehler “Uncaught TypeError: Cannot read property ‘appendChild’ of null” oder “Cannot call method ‘appendChild’ of null” vermieden!