JavaScript innerHTML 不更新元素答案

【问题标题】：JavaScript innerHTML not updating elementJavaScript innerHTML 不更新元素
【发布时间】：2012-05-31 02:35:09
【问题描述】：

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

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

【问题讨论】：

标签： javascript

【解决方案1】：

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

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

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

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

【讨论】：

对我来说就像一个魅力。谢谢。
还要确保没有错字。 .innerHTML 有效，而不是`.innerHtml`。

【解决方案2】：

您必须等到 DOM 加载完毕。

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

【讨论】：

【解决方案3】：

你有两个选择：

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

或

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

【讨论】：

【解决方案4】：

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

例如：

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

【讨论】：

谢谢你！这就是我需要的，我不知道为什么，但这个解决方案为我解决了它。
为什么这个工作而不是 document.querySelectorAll ？

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

您也可以在 DOM 初始化后将defer 关键字与脚本一起使用来执行它

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

【讨论】：

【解决方案7】：

只需将script 标签放在底部即可。

<!doctype html>
<html>
<head>
Head Content here...
</head>
<body>
Body Content...
<script>
script function here...
</script>
</body>
</html>

【讨论】：

【解决方案8】：

您也可以这样做...

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

根据w3schools 和基本的 JavaScript 规则，这是可行的。我以前也试过这个。

这以onload函数为基础，在启动时自动运行代码。它还利用 JS 赋值运算符来快速高效地执行代码。

【讨论】：

【解决方案9】：

这个怎么样

function change(){
  document.getElementById("content").innerHTML = "Javascript";
}

<html>
<div>
<p id="content">TypeScript</p>
<button onclick="change()">Change</button>
</div>
</html>

【讨论】：

这似乎并不能真正回答这个问题。你能edit你的答案来解释为什么这会解决这个问题吗？