web-dev-qa-db-fra.com

Pourquoi document.body est-il nul dans mon javascript?

Voici mon bref document HTML.

Pourquoi Chrome Console notant cette erreur:

"Uncaught TypeError: Impossible d'appeler la méthode 'appendChild' de null"?

<html>
<head>
    <title>Javascript Tests</title>

    <script type="text/javascript">

        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");

    </script>
</head>
<body>

</body>
</html>
javascriptgoogle-chrome
115
John Hoffman

Le corps n'a pas encore été défini. En général, vous voulez créer tous les éléments avant d'exécuter du javascript utilisant ces éléments. Dans ce cas, vous avez du javascript dans la section head qui utilise body. Pas cool.

Vous voulez envelopper ce code dans un window.onload gestionnaire ou placez-le après le <body>tiquette (comme mentionné par e-bacho 2. ).

<head>
    <title>Javascript Tests</title>

    <script type="text/javascript">
      window.onload = function() {
        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");
      }

    </script>
</head>

Voir démo .

155
Sergio Tulentsev

Votre script est en cours d'exécution avant même que l'élément body ne soit chargé.

Il existe deux façons de contourner ce problème.

  • Enveloppez votre code dans un rappel de chargement DOM:

    Enveloppez votre logique dans un écouteur d'événement pour DOMContentLoaded.

    Ce faisant, le rappel sera exécuté lorsque l'élément body sera chargé.

    document.addEventListener('DOMContentLoaded', function () {
    // ...
    // Place code here.
    // ...
});

    Selon vos besoins, vous pouvez également attacher un écouteur d'événement load à l'objet window:

    window.addEventListener('load', function () {
    // ...
    // Place code here.
    // ...
});

    Pour la différence entre les événements DOMContentLoaded et load, voir cette question .

  • Déplace la position de ton <script> élément, et chargez JavaScript en dernier:

    En ce moment, votre <script> L'élément _ est en cours de chargement dans le <head> _ élément de votre document. Cela signifie qu'il sera exécuté avant le chargement de body. développeurs Google recommande de déplacer le <script> balises à la fin de votre page afin que tout le contenu HTML soit rendu avant le traitement de JavaScript.

    <!DOCTYPE html>
<html>
<head></head>
<body>
  <p>Some paragraph</p>
  <!-- End of HTML content in the body tag -->

  <script>
    <!-- Place your script tags here. -->
  </script>
</body>
</html>
28
Josh Crozier

Ajoutez votre code à l'événement onload. La réponse acceptée le montre correctement. Toutefois, cette réponse, ainsi que toutes les autres au moment de la rédaction, suggère également de placer la balise script après la balise body de fermeture,.

Ce n'est pas valide HTML. Cependant, votre code fonctionnera, car les navigateurs sont trop gentils;)

Voir cette réponse pour plus d'informations Est-il incorrect de placer la balise <script> après la balise </ body>?

Réduit les autres réponses pour cette raison.

8
Martin Hansen

Ou ajouter cette partie

<script type="text/javascript">

    var mySpan = document.createElement("span");
    mySpan.innerHTML = "This is my span!";

    mySpan.style.color = "red";
    document.body.appendChild(mySpan);

    alert("Why does the span change after this alert? Not before?");

</script>

après le HTML, comme:

    <html>
    <head>...</head>
    <body>...</body>
   <script type="text/javascript">
        var mySpan = document.createElement("span");
        mySpan.innerHTML = "This is my span!";

        mySpan.style.color = "red";
        document.body.appendChild(mySpan);

        alert("Why does the span change after this alert? Not before?");

    </script>

    </html>
4
Boris Bachovski

Le navigateur analyse votre code HTML de haut en bas, votre script s'exécute avant que le corps ne soit chargé. Pour corriger le script après le corps.

  <html>
  <head>
       <title> Javascript Tests </title> 
  </head>
 <body>
 </body>
  <script type="text/javascript">

    var mySpan = document.createElement("span");
    mySpan.innerHTML = "This is my span!";

    mySpan.style.color = "red";
    document.body.appendChild(mySpan);

    alert("Why does the span change after this alert? Not before?");

</script>
</html>
1
Emmanuel N

document.body n'est pas encore disponible lorsque votre code est exécuté.

Que pouvez-vous faire à la place:

var docBody=document.getElementsByTagName("body")[0];
docBody.appendChild(mySpan);
0
Christophe