Question

这是一个非常简单的程序，输出应该是s和JavaScript，但我只是a。

<html>
    <head>
        <title></title>
        <script type="text/javascript">
          document.getElementById("ma").innerHTML="JavaScript";
        </script>
    </head>
    <body>
        <h1 id="ma">s</h1>
    </body>
</html>

Answer 1

在您尝试设置值时，该元素不存在。将<h1>添加到DOM后，您需要调用此方法。

您可以进一步移动此<script>标记，或将逻辑添加到文档加载时应该调用的函数中：

window.onload = function() {
    /* Add your logic here */
}

演示：http://jsfiddle.net/Lr2Hm/

Answer 2

你必须等到DOM加载完毕。

window.onload = function(){
    document.getElementById("ma").innerHTML="JavaScript";
}

Answer 3

您有两个选择：

window.onload = function() {
  //your script here
}

或

<body>
    <h1 id="ma">s</h1>
    <script type='text/javascript'>
        //your script here
    </script>
</body>

Answer 4

请注意，您使用element.innerHTML =＆＃34;任何内容＆＃34; 将替换元素的实际内容。如果您要添加更多内容，您必须将所有内容存储到累积变量，元素的实际内容也是如此，以便保留它，然后在内容已满时将此变量解析为innerHTML。

<script type=text/javascript">
var MyFullVar = element.innerHTML + "my new content I want to add";
element.innerHTML = MyFullVar;
</script>

Answer 5

您也可以使用 defer 关键字和脚本在 DOM 初始化后执行它

<script type=text/javascript" defer>/*Your script here*/</script>

Answer 6

您也可以改为...

<script type=text/javascript">
    window.onload = function () {
        var element = document.getElementById('element').innerHTML;
        var content = ".........";
        element.innerHTML += content.toString();
    }
    </script>

根据w3schools和基本JavaScript规则，此方法有效。我之前也尝试过。

这基于onload函数在启动时自动运行代码。它还利用JS赋值运算符快速有效地执行代码。

Answer 7

提供的选项对我不起作用。 document.querySelector为我工作！

例如：

document.querySelector("#ma").innerHTML = "HELLO";

JavaScript innerHTML不起作用

7 个答案: