Lỗi Javascript - không thể gọi phương thức 'appendChild' của null

Tôi mới dùng Javascript (và lập trình nói chung) và đã cố gắng nắm bắt cơ bản về làm việc với DOM. Xin lỗi nếu đây là một sai lầm rất cơ bản, nhưng tôi nhìn xung quanh và không thể tìm thấy câu trả lời.Lỗi Javascript - không thể gọi phương thức 'appendChild' của null

Tôi đang cố gắng sử dụng phương thức appendChild để thêm tiêu đề và một số đoạn văn bản vào trong tệp HTML cơ bản bên dưới.

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

Đây là mã 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);

Chạy nó gây ra một lỗi: "Không thể gọi phương thức 'appendChild' null"

Trợ giúp? Tôi không thể hiểu tại sao điều này không hoạt động ...

Nguồn

2011-12-29 Ben

Giả sử mã này nằm trong tệp script.js, điều này là do javascript đang chạy trước khi phần còn lại của trang HTML đã tải.

Khi trang HTML tải, khi nó xuất hiện tài nguyên được liên kết, chẳng hạn như tệp javascript, nó tải tài nguyên đó, thực thi tất cả mã có thể và sau đó tiếp tục chạy trang. Vì vậy, mã của bạn đang chạy trước khi <div> được tải trên trang.

Di chuyển thẻ <script> của bạn xuống cuối trang và bạn sẽ không còn gặp lỗi nữa. Ngoài ra, hãy giới thiệu một sự kiện như <body onload="doSomething();"> và sau đó thực hiện phương thức doSomething() trong tệp javascript của bạn để chạy các câu lệnh đó.

Nguồn

2011-12-29 16:38:44 Tejs

Tập lệnh của bạn đang chạy trước khi có sẵn các phần tử.

Đặt tập lệnh của bạn trực tiếp trước thẻ đóng </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>

Nguồn

2011-12-29 16:37:13

Có một cách dễ dàng hơn để giải quyết vấn đề này. Đặt JavaScript của bạn bên trong một hàm và sử dụng window.onload. Ví dụ:

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

Bây giờ, bạn không phải di chuyển thẻ vì mã sẽ chạy mã sau khi HTML đã tải.

Nguồn

2014-02-27 21:40:32 Brendan

tôi nghe thêm một sự kiện để chờ DOM nội dung để tải đầy đủ

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

Nguồn

2016-09-16 03:19:14

DOM của bạn không được nạp, vì vậy getElementById sẽ trả về null, sử dụng document.ready() trong 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); 

    }

Nguồn

2017-05-09 09:10:13

Vì tệp JavaScript của bạn được tải trước và thời điểm bạn viết window.document.body.appendChild(btn), body phần tử không được tải trong html, đó là lý do bạn đang nhận được lỗi ở đây, bạn có thể tải tệp js khi phần tử nội dung được tải trong 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); 

    }

Nguồn

2017-06-06 06:45:09

Lỗi Javascript - không thể gọi phương thức 'appendChild' của null

Trả lời

Các vấn đề liên quan