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

Javascript - Issue while updating value through innerHTML

本文关键字：问题 -通过 innerHTML 更新 Javascript      更新时间：2023-09-26

我试图检查一些javascript代码，我发现了一件事，我无法理解确切的原因。在我的html文件中，我有一个div与id称为测试没有任何值。现在，我想通过innerHTML更新这个div中的文本/句子。因为它只是为了测试目的，我没有使用任何函数/事件。只是添加a来更新值。

<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>
谁能给我解释一下这事的原因?提前谢谢。

谢谢!
罗宾

这是因为第一个是在 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上的一些文章，如这一篇和这一篇。

非常标准的问题。需要某种形式的"加载"!

<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>

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

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

您将需要执行您的代码，一旦DOM准备好了，通过监听从body标签发送的加载事件。这可以很简单地使用内联侦听器(如<body onload='myFunction'>)或javascript中的onload处理程序来完成:

身体。Onload = function(){…}

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

以jquery为例，您要么必须编写$(document).ready()，要么必须在html代码的最后编写jquery代码，两者都具有相同的含义，即当所有html被加载时，然后做一些功能。这在本例中是一样的，在所有文档内容加载后执行一些功能。举两个例子:

案例# 1:

在这种情况下，我们有javascript代码写在html上面，因为在你的第一种情况下，没有任何事件处理程序，html引擎将开始从上到下读取html代码，在那一刻，它将击中script标签，它将调用javascript引擎。因此，根据这段javascript代码将首先执行。

如果你写这行document.getElementById("test").innerHTML = test_content;: 

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

则控制台将返回null，即x的值将是null .因为div仍未加载，因此div的值不会改变

案例# 2:

script标签放在最后。所以现在，所有的html都被html引擎加载，所以现在x的值将是<div id="test"></div>，现在所有的javascript代码将被执行，没有任何错误。

正如我之前提到的关于jquery $(document).ready()…这是一个jquery方法但也可以在javascript中写成:

<script type="text/javascrip">
var start_script = function(){
// function to be performend
}
</script>
   <body onload="start_script();">
  ......
</body>

，因为所有的事件都是在所有HTML加载和编译时触发的。

相关文章：