Błąd JavaScript - nie można wywołać metody "appendChild" o wartości zerowej

Jestem nowicjuszem w JavaScript (i programowaniu w ogóle) i staram się uzyskać podstawowe pojęcie o pracy z DOM. Przepraszam, jeśli to bardzo podstawowy błąd, ale rozejrzałem się i nie mogłem znaleźć odpowiedzi.Błąd JavaScript - nie można wywołać metody "appendChild" o wartości zerowej

Próbuję użyć metody appendChild, aby dodać nagłówek i tekst akapitu do bardzo prostego pliku HTML poniżej.

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

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

bieganie powoduje błąd: "Nie można wywołać metodę 'appendChild' null"

Pomoc? Nie mogę zrozumieć, dlaczego to nie działa ...

Źródło

2011-12-29 Ben

Zakładając ten kod jest wewnątrz pliku script.js, to dlatego, że JavaScript jest uruchomiony przed reszta strony HTML został załadowany.

Po załadowaniu strony HTML, gdy natrafi na połączony zasób, taki jak plik javascript, ładuje ten zasób, wykonuje cały możliwy kod, a następnie kontynuuje działanie strony. Twój kod działa, zanim zostanie załadowany plik <div>.

Przenieś swój tag <script> na dół strony i nie powinieneś już mieć błędu. Możesz też wprowadzić zdarzenie takie jak <body onload="doSomething();">, a następnie utworzyć w swoim pliku javascript metodę doSomething(), która będzie uruchamiać te instrukcje.

Źródło

2011-12-29 16:38:44 Tejs

Twój skrypt działa, zanim elementy będą dostępne.

Umieść swój skrypt bezpośrednio przed zamykającym tagiem </body>.

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

Źródło

2011-12-29 16:37:13

Istnieje łatwiejszy sposób rozwiązania tego problemu. Umieść JavaScript w funkcji i użyj pliku window.onload. Na przykład:

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

Teraz nie musisz przenosić tagu, ponieważ spowoduje to uruchomienie kodu po załadowaniu HTML.

Źródło

2014-02-27 21:40:32 Brendan

dodać detektor zdarzeń czekać na DOM zawartości do pełnego załadowania

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

Źródło

2016-09-16 03:19:14

Twój DOM nie jest załadowany, więc getElementById zwróci null, używać document.ready() w 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); 

    }

Źródło

2017-05-09 09:10:13

Ponieważ plik JavaScript jest ładowany jako pierwszy, a ten czas podczas pisania window.document.body.appendChild(btn), element nie jest załadowany w html, dlatego dostaję błąd tutaj, możesz załadować plik js po załadowaniu elementu body do 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); 

    }

Źródło

2017-06-06 06:45:09

Błąd JavaScript - nie można wywołać metody "appendChild" o wartości zerowej

Odpowiedz

Powiązane problemy