如何将javascript变量打印为html标记_Javascript_Html

如何将javascript变量打印为html标记

javascript html

如何将javascript变量打印为html标记,javascript,html,Javascript,Html,我有这个密码 <script language="javascript">var str = "test"; </script> var str=“test”；我想把它打印到html中的h2标记上 <h2 id="header2"> </h2> 我试过使用document.write（str）我还尝试了document.getElementById（“header2”）.innerHTML=str 但什么都没用 window.onlo

我有这个密码

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

var str=“test”；

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

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

我试过使用

document.write（str）

我还尝试了

document.getElementById（“header2”）.innerHTML=str
但什么都没用
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>

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

HTML:
在完整的html页面中，它将如下所示：
<html>
  <head></head>
  <body>
    <h2 id="header2"></h2>
    <script>
      var str = "Test";
      document.getElementById("header2).innerHTML = str;
    </script>
  </body>
</html>

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

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


var str=“测试”；
document.getElementById（“header2）.innerHTML=str；

确保您的
出现在您的
标签后面。
您的问题不清楚
确保html DOM已完全加载，然后脚本将关闭
如果脚本位于头部，另一个选项是确保使用以下命令完全加载DOM：window.load（）
或使用jQuery$（document.ready（）
最有可能的是，JavaScript在加载DOM之前执行，因此document.getElementById（“header2”）
引发错误，因此脚本无法工作
通过将DOM包装在onload
事件中，可以确保在执行JavaScript之前已加载DOM，如下所示：
<html>
  <head></head>
  <body>
    <h2 id="header2"></h2>
    <script>
      var str = "Test";
      document.getElementById("header2).innerHTML = str;
    </script>
  </body>
</html>

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

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

另一种选择是将脚本元素放在body元素下面，这样脚本在加载上面的所有内容之前不会运行。我建议始终这样做，这样页面就不会被“锁定”“等待您的JavaScript加载，但这不一定是确保DOM已加载的未来可靠的方法。我不认为当前的浏览器会这样做，但是将来的浏览器可能不会从上到下加载DOM，这会破坏您的脚本
因此，我的建议是对HTML文件进行如下结构：
<html>
  <head></head>
  <body>
    <h2 id="header2"></h2>
    <script>
      var str = "Test";
      document.getElementById("header2).innerHTML = str;
    </script>
  </body>
</html>

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

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


window.onload=函数（）{
var str=“测试”；
document.getElementById（“header2”）.innerHTML=str；
}
它不起作用，因为您试图在创建“header2”h2标记之前赋值。之后必须编写javascript代码
在这种情况下，您可以按如下方式编写代码：
<h2 id="header2"> </h2>
<script language="javascript">
    var str = "test";
    document.getElementById("header2").innerHTML=str; 
</script>


var str=“测试”；
document.getElementById（“header2”）.innerHTML=str；
是结束标记之前的
标记吗？最好提供一个尝试的玩具示例，例如on。这两种方法都应该有效。试着提供一个更完整的示例，并查看JS错误控制台以寻找线索。你的代码运行得很好：你的代码绝对很好，也许你在错误的地方运行它。如果你不能重现一个问题，那么就不要回答它：留下一条评论并投票将其关闭为不可恢复。这不是与@prabhat相同的答案吗？让我们保持干净guys@A1rPun你能把答案再读一遍吗？答案是用“或”写的。作为另一种选择，@PrabhatJain这是信息过载，这不好：）@Dipaks这个答案只是帮助这个人解决他的问题。我只是想给出一个更好的方法。现在我问你，这真的很糟糕吗？当OP没有要求使用jQuery时，jQuery是一种比JavaScript更好的方法。它可能没有意识到这一点，这就是为什么我要提到这一点。我不认为给出一个描述性的答案真的是冒犯：）因为这是在添加不需要的代码。他们当前的代码运行良好很可能只是在错误的位置执行此代码比在页面底部编写脚本要好imho，我知道jQuery document.ready更好，但这是一个快速、简单的javascript解决方案，适用于大多数浏览器我反对悲观的人，您的代码非常优雅，显示您等待窗口加载，+1来自meI，我理解，但是他的代码已经在工作了，只是在我想象的错误位置执行。因此，虽然这样做有效，.onload在技术上并不需要OP没有提到等待文档准备就绪或在底部编写代码……所以我提供了另一种解决方案。真正地SO的定义是什么？