getElementById 和 onLoad答案

【问题标题】：getElementById and onLoadgetElementById 和 onLoad
【发布时间】：2013-01-04 20:58:47
【问题描述】：

HTML 文件 ...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="src/myJS.js"></script>
</head>
<body onload="myJS.myFunction();">
<p id="p01"></p>
</body>
</html>

外部 Javascript 文件（为方便起见称为 myJS.js）...

myJS = {
    myFunction: function()
    {
        //This works
        document.write("Hello world. ");

        //This does not work
        document.getElementById("p01").appendChild(document.createTextNode("Hello world, again"));
    }
};

我的最佳猜测是在执行myJS 时尚未创建节点p01，但我认为onload 会用它做正确的事情。

【问题讨论】：

你在document.write()之后运行document.getElementById()吗？
body.onload 会在页面 code （确切的 html/php/asp 文件）被渲染后立即触发，而不是在所有元素都已加载时触发。另一方面，window.onload 在脚本、图像等所有元素都已加载时触发。
您面临的问题是什么？您应该能够渲染 p01。你不明白吗？
@inhan 我不这么认为，body onload=... 和 window.onload 完全一样。

标签： javascript onload getelementbyid

【解决方案1】：

如果您的外部 js 确实包含您发布的两行代码，那么问题是 document.write 正在覆盖整个 HTML（一旦加载 DOM，它的行为就会如此）。然后getElementById 将找不到任何#p01，因为它不再存在。

如果您只是删除document.write 调用，您的代码应该可以工作（请参阅live example）。

【讨论】：

已排序，谢谢。现在我知道了一些我以前不知道的关于 document.write 的东西。

【解决方案2】：

因为p01 尚未添加到 DOM。

试试这样：

<body>
<p id="p01"></p>
<script type="text/javascript">
window.onload = myJS.myFunction;
</script>
</body>

【讨论】：