如何将javascript变量打印到html标记中

how to print javascript variable to html tags

本文关键字：html 打印 javascript 变量      更新时间：2023-09-26

我有这个代码

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

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

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

我试过使用document.write (str)；

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

但无效

很可能，您的JavaScript在加载DOM之前就已经执行了，所以document.getElementById("header2")抛出了一个错误，因此您的脚本无法工作。

您可以通过将DOM包装在onload事件中来确保在执行JavaScript之前已经加载DOM，如下所示：

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

另一种选择是将script元素放在body元素下面，这样脚本在加载上面的所有内容之前不会运行。我建议始终这样做，这样页面就不会"锁定"等待JavaScript加载，但这不一定是确保DOM已加载的经得起未来考验的方法。我认为目前的浏览器都不会这样做，但将来的浏览器可能不会从上到下加载DOM，这会破坏您的脚本。

所以我的建议是把你的HTML文件结构成这样：

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

它不起作用，因为您试图在创建"header2"h2标记之前赋值。之后必须编写javascript代码。

在这种情况下，你可以写你的代码如下：

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

您的代码在这里运行良好：

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>标记之后。

您的问题不清楚

确保html DOM已完全加载，然后您的脚本将关闭

如果您的脚本在头部，另一个选项是通过使用：window.load()或使用jQuery $(document).ready() 来确保DOM已完全加载

window.onload = function() {
 document.getElementById('id').innerHTML = 'str';

}

您需要等待页面加载

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

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

或者您也可以在文档中编写此代码。准备

$( document ).ready(function() {
    document.getElementById("header2").innerHTML = str;
});
相关文章：