2012-06-22 32 views
11

Tôi có một trang html đơn giản không có mã trong thẻ body. Tôi muốn chèn html vào thẻ body thông qua javascript.Không thể đặt thuộc tính InnerHTML of null

Tệp javascript của tôi trông như thế này.

var Global={ 
    UserWall:function(){ 
      return "a very long html code"; 
    } 
}; 

    var globalObject=Object.create(Global); 
    document.getElementsByTagName("body").item(0).innerHTML=globalObject.UserWall(); 

Bây giờ tôi muốn mã html này rất dài được tự động chèn vào thẻ nội dung khi tải trang. Nhưng nó cho tôi lỗi mà tôi đã đề cập trong tiêu đề. Tại sao?

và đây cũng là cách chính xác để tạo trang web dựa trên ajax (không tải lại trang) nghĩa là nếu tôi gọi tập lệnh phía máy chủ để cập nhật mã html dài này và nối nó vào phần nội dung của trang.

Trả lời

49

Bạn đang gần như chắc chắn chạy mã của bạn trước khi DOM được xây dựng. Thử chạy mã của bạn trong một hàm window.onload handler (nhưng xem ghi chú bên dưới):

window.onload = function() { 
    // all of your code goes in here 
    // it runs after the DOM is built 
} 

Một giải pháp qua trình duyệt phổ biến là đặt <script> khối của bạn ngay trước thẻ đóng </body> thẻ. Đây có thể là giải pháp tốt nhất cho bạn, tùy thuộc vào nhu cầu của bạn:

<html> 
    <body> 

    <!-- all of your HTML goes here... --> 

    <script> 
     // code in this final script element can use all of the DOM 
    </script> 
    </body> 
</html> 
  • Lưu ý rằng window.onload sẽ đợi cho đến khi tất cả hình ảnh và khung phụ đã nạp, mà có thể là một thời gian dài sau khi DOM được xây dựng. Bạn cũng có thể sử dụng document.addEventListener("DOMContentLoaded", function(){...}) để tránh sự cố này, nhưng điều này không được hỗ trợ qua trình duyệt. Thủ thuật dưới cơ thể là cả hai trình duyệt chéo và chạy ngay khi DOM hoàn tất.
+0

thnx để giải thích nó hoạt động tốt. – Mj1992

+0

hey bạn có thể cho tôi biết đây là cách thích hợp để phát triển ứng dụng ajax bằng cách nối văn bản vào phần thân trong thời gian chạy không? – Mj1992

+0

Câu trả lời hoàn hảo! – Chip

0

có lẽ đây sẽ làm việc: document.getElementsByTagName("body")[0].innerHTML

+0

không hoạt động .... – Mj1992

4

đang chạy này trong <head> của html? Nếu vậy, bạn cần đảm bảo rằng thẻ <body> đã thực sự được tải trước.

Bạn cần phải sử dụng một trình xử lý onload, ví dụ: http://javascript.about.com/library/blonload.htm

+0

nó đang chạy trong tập lệnh bên ngoài – Mj1992

+0

Không quan trọng. _Khi_ bạn đang tải nó vào? Nếu nó được bao gồm trong thẻ '' nó vẫn chạy ngay lập tức. – TheZ

+0

được bao gồm trong thẻ đầu – Mj1992

5

Tôi đã thực hiện tất cả các giải pháp được đề cập ở đây. nhưng họ đã không làm việc cho đến khi tôi đã thực hiện điều này một sử dụng jQuery:

trong trang HTML của tôi:

> <div id="labelid" > </div> 

và khi tôi bấm vào một nút, tôi đặt này trong tập tin JS của tôi:

$("#labelid").html("<label>Salam Alaykom</label>"); 
Các vấn đề liên quan