Question

我试图检查一些javascript代码，我发现了一件我无法理解的确切原因。在我的html文件中，我有一个id为id的div，它没有任何值。现在，我想通过innerHTML更新此div中的文本/句子。因为它仅用于测试目的，我没有使用任何功能/事件。只需添加一个即可更新值。

<body>
<script type="text/javascript">
    var test_content = "This is new text in my test div";
    document.getElementById("test").innerHTML = test_content;
</script>
<div id="test"></div>
</body>

现在，当我加载页面时，它在测试div中显示为空，但如果将javascript代码放在div下面，如下所示，那么它将显示变量中的值。（注意：我没有使用任何函数或事件，只想更新页面加载）。

<body>    
<div id="test"></div>
<script type="text/javascript">
    var test_content = "This is new text in my test div";
    document.getElementById("test").innerHTML = test_content;
</script>
</body>

任何人都可以解释一下这个原因吗？提前谢谢。

谢谢！
罗宾

Answer 1

这是因为第一个是在<{>>之前执行创建的div#test，所以它目前还不存在。这就是为什么将script标记放在页面底部或用window.onload事件监听器包装它们的好习惯。

<body>    
<script type="text/javascript">
    window.onload = function () {
        var test_content = "This is new text in my test div";
        document.getElementById("test").innerHTML = test_content;
    }
</script>
<div id="test"></div>
</body>

如果您使用的是jQuery，您也可以这样做：

$(function () {
    var test_content = "This is new text in my test div";
    document.getElementById("test").innerHTML = test_content;
});

由于您似乎是JavaScript编码的初学者，我建议您阅读MDN上的一些文章，例如this one和this one。

Answer 2

非常标准的问题。需要某种“onload”！

<body>    
<div id="test"></div>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
      var test_content = "This is new text in my test div";
      document.getElementById("test").innerHTML = test_content;
    });
</script>
</body>

Answer 3

Javascript在运行时执行，一旦被调用。在第一个示例中，解析器读取脚本标记，执行它然后加载页面的其余部分（从上到下）。由于脚本在div被加密并创建之前执行，因此div将保持为空。这就是引入onload事件的原因。 http://www.w3schools.com/jsref/event_onload.asp

Answer 4

在第一个实例中没有发生这种情况的原因是因为尚未创建DOM元素“test”。

当您将脚本放在div之后时，该元素已经创建，因此脚本可以执行。

通过侦听从body标记调度的加载事件，您需要在DOM准备好后执行代码。这可以非常简单地使用内联侦听器（例如<body onload='myFunction'>）或javascript中的onload处理程序来完成：

body.onload = function（）{...}

Answer 5

以jquery为例，您必须编写$(document).ready()或者必须在html代码的最后编写jquery代码，并且两者具有相同的含义，即加载所有html然后执行某些功能。在这种情况下，这是相同的，在加载所有文档内容后执行一些功能。采取两种情况：

案例＃1：

在这种情况下，我们在html上面写了javascript代码，就像你的第一个案例中没有任何事件处理程序一样，html引擎将从上到下开始读取html代码，此刻它会到达{{ 1}}标记它将调用javascript引擎。所以根据这个javascript代码将首先执行。

如果你写这一行script as：

document.getElementById("test").innerHTML = test_content;

然后控制台将返回var x = document.getElementById("test"); x.innerHTML = test_content;，即null的值为x。因为div仍未加载，因此div的值不会改变

案例＃2：

null标记放在最后。所以现在，所有的html都是由html引擎加载的，所以现在script的值将是x，现在所有的javascript代码都会被执行而没有任何错误。

正如我之前提到的关于jquery <div id="test"></div> ...这是一个jquery方法，但这可以用javascript写成：

$(document).ready()

因为在加载和编译所有html时会触发所有事件。

Javascript - 通过innerHTML更新值时出现问题

5 个答案: