Erreur Javascript: ne peut pas appeler la méthode 'appendChild' of null

Je suis nouveau sur Javascript (et la programmation en général) et j'ai essayé d'avoir une compréhension de base sur le travail avec le DOM. Excusez-moi s'il s'agit d'une erreur très fondamentale, mais j'ai regardé autour de moi et je n'ai pas trouvé de réponse.

J'essaie d'utiliser la méthode appendChild pour ajouter un titre et un texte de paragraphe dans le fichier HTML très bas ci-dessous.

<html> <head> <title>JS Practice</title> </head> <body> <script src="script.js"></script> <div id = "main"> <h1>Simple HTML Page</h1> <p>This is a very simple HTML page.</p> <p>It's about as basic as they come. It has: </p> <ul> <li>An H1 Tag</li> <li>Two paragraphs</li> <li>An unordered list</li> </ul> </div> <div id="javascript"> </div> </body> </html> 

Voici le code js:

 var newHeading = document.createElement("h1"); var newParagraph = document.createElement("p"); newHeading.innerHTML = "New Heading!"; newParagraph.innerHTML = "Some text for a paragraph."; document.getElementById("javascript").appendChild(newHeading); document.getElementById("javascript").appendChild(newParagraph); 

L'exécution provoque une erreur: "Impossible d'appeler la méthode" appendChild 'of null "

Aidez-moi? Je ne peux pas comprendre pourquoi ça ne fonctionne pas …

En supposant que ce code se trouve dans le fichier script.js , c'est parce que le javascript s'exécute avant que le reste de la page HTML ne soit chargé.

Lorsqu'une page HTML est chargée, lorsqu'elle rencontre une ressource liée telle qu'un fichier javascript, elle charge cette ressource, exécute tous les codes qu'elle peut, puis poursuit l'exécution de la page. Votre code fonctionne donc avant que <div> soit chargé sur la page.

Déplacez votre <script> au bas de la page et vous ne devriez plus avoir l'erreur. Sinon, introduisez un événement tel que <body onload="doSomething();"> puis faites une méthode doSomething() dans votre fichier javascript qui exécutera ces instructions.

Il existe un moyen plus simple de résoudre ce problème. Placez votre JavaScript dans une fonction et utilisez la fenêtre. Ainsi, par exemple:

 window.onload = function any_function_name() { var newHeading = document.createElement("h1"); var newParagraph = document.createElement("p"); newHeading.innerHTML = "New Heading!"; newParagraph.innerHTML = "Some text for a paragraph."; document.getElementById("javascript").appendChild(newHeading); document.getElementById("javascript").appendChild(newParagraph); } 

Maintenant, vous n'avez pas besoin de déplacer votre étiquette parce que cela fonctionnera avec votre code après le chargement du code HTML.

Votre script est en cours d'exécution avant que les éléments ne soient disponibles.

Placez votre script directement avant la </body> fermeture.

 <html> <head> <title>JS Practice</title> </head> <body> <div id = "main"> <h1>Simple HTML Page</h1> <p>This is a very simple HTML page.</p> <p>It's about as basic as they come. It has: </p> <ul> <li>An H1 Tag</li> <li>Two paragraphs</li> <li>An unordered list</li> </ul> </div> <div id="javascript"> </div> <!-- Now it will run after the above elements have been created --> <script src="script.js"></script> </body> </html> 

J'ajoute un auditeur d'événements pour attendre que le contenu DOM soit entièrement chargé

document.addEventListener('DOMContentLoaded', function(){ place_the_code_you_want_to_run_after_page_load }

Votre DOM n'est pas chargé, donc getElementById renverra null, utilisez document.ready () dans jquery

  $(document).ready(function(){ var newHeading = document.createElement("h1"); var newParagraph = document.createElement("p"); newHeading.innerHTML = "New Heading!"; newParagraph.innerHTML = "Some text for a paragraph."; document.getElementById("javascript").appendChild(newHeading); document.getElementById("javascript").appendChild(newParagraph); } 

Étant donné que votre fichier JavaScript est chargé en premier, et lorsque vous écrivez window.document.body.appendChild(btn) , l'élément du body n'est pas chargé dans html, c'est pourquoi vous obtenez une erreur ici, vous pouvez charger le fichier js une fois l'élément du corps Est chargé dans DOM.

Index.html

 <html> <head> <script src="JavaScript.js"></script> </head> <body onload="init()"> <h3> button will come here</h3> </body> </html> 

JavaScript.js

 function init(){ var button = window.document.createElement("button"); var textNode = window.document.createTextNode("click me"); button.appendChild(textNode); window.document.body.appendChild(button); }