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

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

javascript

Javascript-通过innerHTML更新值时出现问题,javascript,innerhtml,Javascript,Innerhtml,我试图检查一些javascript代码，但发现了一件事，我无法理解确切的原因。在我的html文件中，我有一个id为test的div，它没有任何值。现在，我想通过innerHTML更新这个div中的a文本/句子。因为它只是为了测试目的，所以我没有使用任何函数/事件。只需添加一个更新值 <body> <script type="text/javascript"> var test_content = "This is new text in my test div";

我试图检查一些javascript代码，但发现了一件事，我无法理解确切的原因。在我的html文件中，我有一个id为test的div，它没有任何值。现在，我想通过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>


var test_content=“这是我的测试div中的新文本”；
document.getElementById（“test”）.innerHTML=测试内容；

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


var test_content=“这是我的测试div中的新文本”；
document.getElementById（“test”）.innerHTML=测试内容；

谁能解释一下原因吗？提前谢谢

谢谢

罗宾

相当标准的一期。需要某种“加载”

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


document.addEventListener（'DOMContentLoaded'，function（）{
var test_content=“这是我的测试div中的新文本”；
document.getElementById（“test”）.innerHTML=测试内容；
});

这是因为在创建

div#test

之前执行第一个，所以它目前不存在。这就是为什么将
脚本
标记放在页面底部或用
窗口将它们包装起来是一种好的做法。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>

由于您似乎是JavaScript编码的初学者，我建议您阅读一些关于和的文章。
JavaScript在运行时执行，只要调用它。在第一个示例中，解析器读取脚本标记，执行它，然后加载页面的其余部分（从上到下）。由于脚本是在加载和创建div之前执行的，因此div将保持为空。这就是引入onload事件的原因
第一个实例中没有发生这种情况的原因是DOM元素“test”尚未创建
当您将脚本放在div之后时，元素已经创建，因此脚本可以执行
一旦DOM就绪，您就需要执行代码，方法是监听从
body
标记发送的加载事件。这可以非常简单地使用一个在线监听器（如
）或通过javascript中的onload处理程序来完成：

body.onload=function（）{…}
以jquery为例，您要么必须编写
$（document）.ready（）
，要么必须在最后一段html代码中编写jquery代码，这两个代码都具有相同的含义，即加载所有html后，再执行一些功能。在这种情况下也是如此，在加载所有文档内容后执行一些功能。以两个案例为例：
案例1：
在本例中，我们将javascript代码写在html之上，就像在第一个没有任何事件处理程序的情况下一样，html引擎将开始从上到下读取html代码，在点击
script
标记时，它将调用javascript引擎。所以根据这个javascript代码将首先执行
如果您写这行
document.getElementById（“test”）.innerHTML=test\u content 作为：然后，控制台将返回null ，即x 的值将是null 。因为div仍然没有加载，因此div的值不会更改案例2：脚本标记位于最后一个位置。现在，所有的html都是由html引擎加载的，所以现在x 的值将是，现在所有的javascript代码都将在没有任何错误的情况下执行正如我前面提到的jquery$（document）.ready（）。。。这是一个jquery方法，但可以用javascript编写为： <script type="text/javascrip"> var start_script = function(){ // function to be performend } </script> <body onload="start_script();"> ...... </body> var start_script=函数（）{ //要执行的功能 } ...... 因为所有事件都是在加载和编译所有html时触发的他问原因，这是一个正确的解决方案，但实际上并没有回答问题。 $(function () { var test_content = "This is new text in my test div"; document.getElementById("test").innerHTML = test_content; }); var x = document.getElementById("test"); x.innerHTML = test_content; <script type="text/javascrip"> var start_script = function(){ // function to be performend } </script> <body onload="start_script();"> ...... </body>