Ошибка JavaScript - не удается вызвать метод 'appendChild' со значением NULL

Я новичок в Javascript (и программировании в целом) и пытаюсь понять основы работы с DOM. Извиняюсь, если это очень простая ошибка, но я оглянулся и не смог найти ответ.

Я пытаюсь использовать метод appendChild для добавления заголовка и некоторого текста абзаца в самый простой HTML-файл ниже.

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

Вот код 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);

Запуск его вызывает ошибку: "Невозможно вызвать метод 'appendChild' со значением NULL"

Помогите? Я не могу понять, почему это не работает...

Источник

6 ответов

Решение

Предполагая, что этот код находится внутри script.js файл, это потому, что JavaScript работает до загрузки остальной части HTML-страницы.

Когда страница HTML загружается, когда она сталкивается со связанным ресурсом, таким как файл javascript, она загружает этот ресурс, выполняет весь код, который может, и затем продолжает работу страницы. Итак, ваш код работает до <div> загружается на страницу.

Переместить ваш <script> тег в нижней части страницы, и у вас больше не должно быть ошибки. Кроме того, введите событие, такое как <body onload="doSomething();"> а затем сделать doSomething() метод в вашем файле JavaScript, который будет запускать эти операторы.

Источник

Есть более простой способ решить эту проблему. Поместите свой JavaScript в функцию и используйте window.onload. Так, например:

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

Теперь вам не нужно перемещать ваш тег, потому что он будет запускать ваш код после загрузки HTML.

Источник

Ваш скрипт выполняется до того, как элементы станут доступны.

Разместите свой сценарий непосредственно перед закрытием </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>
Источник

Я добавляю прослушиватель событий, чтобы дождаться полной загрузки содержимого DOM

document.addEventListener("DOMContentLoaded", function() {
    place_the_code_you_want_to_run_after_page_load
})
Источник

Ваш DOM не загружен, поэтому getElementById вернет null, используйте document.ready() в 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); 

   }
Источник

Потому что ваш файл JavaScript загружается первым, и в тот момент, когда вы пишете window.document.body.appendChild(btn), body элемент не загружается в html, поэтому здесь вы получаете сообщение об ошибке, вы можете загрузить файл js после загрузки элемента body в 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);

  }
Источник
Другие вопросы по тегам