Question

我正在尝试更新div标签的innerHTML，这里的简单应用可能有问题：

<!DOCTYPE html>
<html lang="en" xmlns=""http://www.w3.org/1999/xhtml"">
<head>
<title>Test</title>
 <script> 
    var element = document.getElementById("aaa");
    element.innerHTML = "1";
 </script>
</head>
<body>
<div id="aaa">aaa</div>
</body>
</html>

当我在浏览器中看到它时，我希望“aaa”为“1”。

任何想法？

感谢

Answer 1

目前，您的脚本正在执行，JavaScript中没有#aaa元素。

好的做法是将<script>标记放在</body>之前，以便在加载所有文档时执行脚本：

<!DOCTYPE html>
<html lang="en" xmlns=""http://www.w3.org/1999/xhtml"">
<head>
    <title>Test</title>
</head>
<body>
    <div id="aaa">aaa</div>

    <script> 
        var element = document.getElementById("aaa");
        element.innerHTML = "1";
    </script>
</body>
</html>

Answer 2

这是因为当你的脚本被执行时，元素aaa尚未添加到dom中。

执行dom操作的更安全的方法是在加载dom之后执行它，因为你可以使用onload事件处理程序。

与html加载相关的另一个提示是将所有脚本放在页面底部。

您需要将脚本移至加载

<html lang="en" xmlns=""http://www.w3.org/1999/xhtml"">
<head>
<title>Test</title>
 <script> 
    window.onload = function(){
        var element = document.getElementById("aaa");
        element.innerHTML = "1";
    }
 </script>
</head>
<body>
<div id="aaa">aaa</div>
</body>
</html>

Answer 3

试试这个

<body>
<div id="aaa">aaa</div>
 <script> 
    var element = document.getElementById("aaa");
    element.innerHTML = "1";
 </script>
</body>

加载名称为'aaa'的标记后，应执行

脚本代码否则使用onload事件函数来调用代码

Answer 4

首先看一下你的代码是完全正常的，它只是一些小问题：

解析器命中代码块时执行Javascript代码。这导致您的代码在构造文档的实际主体之前执行，导致element为undefined而不是指向正确的<div>。

要解决此问题，请将代码包装在函数中，然后在onload <body>事件中调用它，该事件将在加载完所有内容后执行。

Answer 5

尝试使用

<script>
    window.onload = function(){
        document.getElementById("aaa").innerHTML = "1";
    }
</script>

Answer 6

 <!DOCTYPE html>
<html lang="en" xmlns=""http://www.w3.org/1999/xhtml"">
 <head>
<title>Test</title>

</head>
<body>
<div id="aaa">aaa</div>
</body>
 <script> 
 var element = document.getElementById("aaa");
 element.innerHTML = "1";
 </script>
 </html>

仅在元素加载

之后才能工作

HTML和JavaScript - 如何更新innerhtml

6 个答案: