18

我有一个简单的 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 代码并将其附加到页面的主体。

4

4 回答 4

55

您几乎可以肯定在构建 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 完成后立即运行。
于 2012-06-22T19:51:22.577 回答
5

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

在我的 HTML 页面中：

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

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

$("#labelid").html("<label>Salam Alaykom</label>");
于 2013-04-12T09:36:20.750 回答
4

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

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

于 2012-06-22T19:49:04.593 回答
0

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

于 2012-06-22T19:48:36.883 回答