无法设置 null 的属性 InnerHTML [重复]答案

【问题标题】：Cannot set property InnerHTML of null [duplicate]无法设置 null 的属性 InnerHTML [重复]
【发布时间】：2012-06-25 03:46:54
【问题描述】：

我有一个简单的 html 页面，body 标记中没有代码。我想通过javascript在body标签中插入html。

我的 javascript 文件如下所示。

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

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

现在我希望这个很长的 html 代码在页面加载时自动插入到 body 标记中。但它给了我我在标题中提到的错误。为什么？

这也是创建基于 ajax 的网站的正确方法（不重新加载页面），这意味着如果我调用服务器端脚本来更新这个非常长的 html 代码并将其附加到页面的正文中。

【问题讨论】：

标签： javascript html

【解决方案1】：

也许这会起作用： document.getElementsByTagName("body")[0].innerHTML

【讨论】：

【解决方案2】：

这是在 html 的 <head> 中运行的吗？如果是这样，您需要确保 <body> 标记实际上已首先加载。

您需要使用 onload 处理程序，例如：http://javascript.about.com/library/blonload.htm

【讨论】：

它在外部脚本中运行
没关系。 什么时候你加载它？如果它包含在<head> 标签中，它仍然会立即运行。
它没有拿起body标签不知道为什么
那是你的问题。它在<head> 标签中！它出现在 <body> 标记之前。因此，内容尚未加载。 还没有 body 标签。使用 onload 处理程序。 javascript.about.com/library/blonload.htm

【解决方案3】：

您几乎可以肯定在 DOM 构建之前运行您的代码。尝试在 window.onload 处理函数中运行您的代码（但请参阅下面的注释）：

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

另一个流行的跨浏览器解决方案是将<script> 块放在关闭</body> 标记之前。这可能是您的最佳解决方案，具体取决于您的需求：

<html>
  <body>

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

    <script>
        // code in this final script element can use all of the DOM
    </script>
  </body>
</html>

请注意，window.onload 将等到所有图像和子帧都加载完毕，这可能是 DOM 构建后的很长时间。您也可以使用document.addEventListener("DOMContentLoaded", function(){...}) 来避免此问题，但不支持跨浏览器。底部技巧既是跨浏览器，又是在 DOM 完成后立即运行。

【讨论】：

感谢解释它工作正常。
嘿，你能告诉我这是通过在运行时将文本附加到正文来开发 ajax 应用程序的正确方法吗？
完美答案！

【解决方案4】：

我已经完成了这里提到的所有解决方案。但直到我使用 Jquery 制作了这个，它们才起作用：

在我的 HTML 页面中：

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

当我点击一个按钮时，我把它放在我的 JS 文件中：

$("#labelid").html("<label>Salam Alaykom</label>");

【讨论】：