如何将javascript变量打印到html标签
[英]how to print javascript variable to html tags
问题描述
I have this code 
我有这个代码
<script language="javascript">var str = "test"; </script>
I want to print it to a h2 tag in my html 我想将其打印到我的html中的h2标签中
<h2 id="header2"> </h2>
I have tried using document.write (str) ; 我已经尝试使用document.write (str) ;
I have also tried document.getElementById("header2").innerHTML = str; 我也尝试了document.getElementById("header2").innerHTML = str;
but nothing worked 但没有任何效果
6 个解决方案
解决方案1
1 已采纳 2014-05-19 10:46:38
Most likely, your JavaScript is executing before the DOM has loaded, so document.getElementById("header2") throws an error, hence why your script won't work. 您的JavaScript最有可能在加载DOM之前执行，因此document.getElementById("header2")会引发错误，因此您的脚本将无法工作。
You can ensure that the DOM has been loaded before you execute JavaScript by wrapping it in an onload event, like this: 您可以通过将其包装在onload事件中来确保在执行JavaScript之前已加载DOM，如下所示：
window.onload = function(){
// Do something
}
Another option is to put your script element below your body element, so that the script isn't run until everything above it is loaded. 另一个选择是将脚本元素放置在body元素下方，以便脚本在加载之前的所有内容之前不会运行。 I recommend always doing this so that the page isn't "locked up" waiting for your JavaScript to load, but it's not necessarily a future-proof way of ensuring that the DOM has been loaded. 我建议始终这样做，以免页面“锁定”以等待JavaScript加载，但这不一定是确保DOM已加载的面向未来的方法。 I don't think any current browsers do this, but one in the future may not load the DOM from top to bottom, which would break your script. 我认为目前没有任何浏览器可以执行此操作，但是将来可能不会从上到下加载DOM，这会破坏您的脚本。
So my suggestion is to structure your HTML file something like this: 因此，我的建议是构建HTML文件，如下所示：
<body>
<h2 id="header"></h2>
</body>
<script>
window.onload = function(){
var str = "test";
document.getElementById("header2").innerHTML = str;
}
</script>
解决方案2
1 2014-05-19 10:47:29
Its not worked because you try to assign value before "header2" h2 tag created. 它不起作用，因为您尝试在创建“ header2” h2标记之前分配值。 you must write javascript code after that. 之后，您必须编写JavaScript代码。
In this case you can write your code as below : 在这种情况下，您可以编写如下代码：
<h2 id="header2"> </h2>
<script language="javascript">
var str = "test";
document.getElementById("header2").innerHTML=str;
</script>
解决方案3
0 2014-05-19 10:40:55
Your code works fine here: 您的代码在这里工作正常：
HTML: HTML：
<h2 id="header2"></h2>
JavaScript: JavaScript：
var str = "Test";
document.getElementById("header2").innerHTML = str;
In a full html page it would look like this: 在完整的html页面中，它看起来像这样：
<html>
<head></head>
<body>
<h2 id="header2"></h2>
<script>
var str = "Test";
document.getElementById("header2).innerHTML = str;
</script>
</body>
</html>
Make sure your <script> appears AFTER your <h2> tag. 确保您的<script>出现在<h2>标签之后。
解决方案4
0 2014-05-19 10:44:48
Your question is not clear 您的问题不清楚
Make sure that the html DOM is loaded fully then your script comes down 确保html DOM完全加载，然后脚本结束
Other option if your script is in the head is to make sure the DOM is fully loaded by using: window.load() or using jQuery $(document).ready() 如果您的脚本位于头部，则其他选择是通过使用以下命令来确保DOM已完全加载： window.load()或jQuery $(document).ready()
解决方案5
-1 2014-05-19 10:39:37
window.onload = function() {
document.getElementById('id').innerHTML = 'str';
}
you need to wait until the page loads 您需要等到页面加载
解决方案6
-1 2014-05-19 10:39:49
Make sure that the html tag is declared before you write the script You DOM element must be loaded before the script starts. 在编写脚本之前，请确保已声明html标记。必须在脚本启动之前加载DOM元素。 For that you can write script later. 为此，您可以稍后编写脚本。
<body>
<h2 id="header2"> </h2>
</body>
<script type="text/javascript">
var str = "test";
document.getElementById("header2").innerHTML = str;
</script>
Or you can also write this code in document.ready 或者您也可以在document.ready中编写此代码
$( document ).ready(function() {
document.getElementById("header2").innerHTML = str;
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.