Ошибка Javascript - невозможно вызвать метод appendChild

Я новичок в 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 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 "

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

Ответ 1

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

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

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

Ответ 2

Существует более простой способ решить эту проблему. Поместите свой 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.

Ответ 3

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

Поместите свой script непосредственно перед закрывающим тегом </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 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>

Ответ 4

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

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

Ответ 5

Ваш 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); 

   }

Ответ 6

Поскольку ваш 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);

  }