Question

我有这段代码

<script language="javascript">var str = "test"; </script>

我想将它打印到html中的h2标签

<h2 id="header2"> </h2>

我尝试过使用document.write (str);

我也试过document.getElementById("header2").innerHTML = str;

但没有任何效果

Answer 1

最有可能的是，您的JavaScript在DOM加载之前正在执行，因此document.getElementById("header2")会抛出错误，因此您的脚本无法正常工作。

您可以在执行JavaScript之前确保已加载DOM，方法是将其包装在onload事件中，如下所示：

window.onload = function(){
    // Do something
}

另一种选择是将脚本元素放在body元素下面，这样脚本就不会运行，直到加载它上面的所有内容。我建议总是这样做，以便页面不会“锁定”等待你的JavaScript加载，但它不一定是确保已加载DOM的面向未来的方法。我不认为任何当前的浏览器会这样做，但将来可能不会从上到下加载DOM，这会破坏你的脚本。

所以我的建议是将HTML文件结构如下：

<body>
<h2 id="header"></h2>
</body>
<script>
window.onload = function(){
    var str = "test";
    document.getElementById("header2").innerHTML = str;
}
</script>

Answer 2

它没有用，因为你试图在＆＃34; header2＆＃34;之前分配值。创建了h2标签。你必须在那之后编写javascript代码。

在这种情况下，您可以编写如下代码：

<h2 id="header2"> </h2>
<script language="javascript">
    var str = "test";
    document.getElementById("header2").innerHTML=str; 
</script>

Answer 3

您的代码在这里工作正常：

<强> JSFiddle

HTML：

<h2 id="header2"></h2>

JavaScript的：

var str = "Test";

document.getElementById("header2").innerHTML = str;

在完整的html页面中，它看起来像这样：

<html>
  <head></head>
  <body>
    <h2 id="header2"></h2>
    <script>
      var str = "Test";
      document.getElementById("header2).innerHTML = str;
    </script>
  </body>
</html>

确保<script>标记后显示<h2>。

Answer 4

您的问题不明确

确保html DOM已完全加载，然后您的脚本停止

如果您的脚本处于首位，那么其他选项是使用：window.load()或使用jQuery $(document).ready()

确保DOM已完全加载

Answer 5

window.onload = function() {

 document.getElementById('id').innerHTML = 'str';


}

您需要等到页面加载

Answer 6

确保在编写脚本之前声明了html标记必须在脚本启动之前加载DOM元素。为此，您可以稍后编写脚本。

<body>
<h2 id="header2"> </h2>
</body>
<script type="text/javascript">
var str = "test";
document.getElementById("header2").innerHTML = str;
</script>

或者您也可以在document.ready

中编写此代码

$( document ).ready(function() {
    document.getElementById("header2").innerHTML = str;
});

如何将javascript变量打印到html标签

6 个答案: