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

Question

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

Demandé el 28 de Mars, 2012: Quand la question a-t-elle été
27267 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Voici mon bref document HTML. Pourquoi la console Chrome note-t-elle cette erreur: "Uncaught TypeError: impossible d'appeler la méthode 'appendChild' of 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>

Demandé el 28 de Mars, 2012 par John Hoffman

Answer 1

5 Réponses

Answer 2

205voto

Sergio Tulentsev Points 82783

Le corps n'est pas défini à ce point encore. En général, vous voulez créer tous les éléments avant d'exécuter le code javascript qui utilise ces éléments. Dans ce cas, vous avez un peu de javascript dans l' head section qui utilise body. Pas cool.

Vous souhaitez envelopper ce code dans un window.onload gestionnaire ou le placer après l' <body> balise (comme mentionné par e-bacho 2.0).

<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 la démo.

Répondu el 28 de Mars, 2012 par Sergio Tulentsev (82783 Points )

Answer 3

8voto

Martin Hansen Points 1406

Ajouter votre code à l'événement onload. La accepté de réponse montre bien, cependant, que la réponse ainsi que tous les autres au moment de l'écriture suggère de mettre la balise de script après la balise body de clôture, .

Ce n'est pas valide html. Toutefois, il sera la cause de votre code de travail, parce que les navigateurs sont trop gentil ;)

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

Downvoted d'autres réponses pour cette raison.

Répondu el 29 de Mars, 2012 par Martin Hansen (1406 Points )

Answer 4

4voto

e-bacho 2.0 Points 432

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>

Répondu el 28 de Mars, 2012 par e-bacho 2.0 (432 Points )

Answer 5

1voto

Emmanuel N Points 4090

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>

Répondu el 28 de Mars, 2012 par Emmanuel N (4090 Points )

Answer 6

0voto

Christophe Points 7878

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);

Répondu el 5 de Novembre, 2013 par Christophe (7878 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: