how to print javascript variable to html tags
Question
I have this code
<script language="javascript">var str = "test"; </script>
I want to print it to a h2 tag in my html
<h2 id="header2"> </h2>
I have tried using document.write (str) ;
I have also tried document.getElementById("header2").innerHTML = str;
but nothing worked
6 answers
solution1
1 ACCPTED 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.
You can ensure that the DOM has been loaded before you execute JavaScript by wrapping it in an onload event, like this:
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. 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. 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.
So my suggestion is to structure your HTML file something like this:
<body>
<h2 id="header"></h2>
</body>
<script>
window.onload = function(){
var str = "test";
document.getElementById("header2").innerHTML = str;
}
</script>
solution2
1 2014-05-19 10:47:29
Its not worked because you try to assign value before "header2" h2 tag created. you must write javascript code after that.
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>
solution3
0 2014-05-19 10:40:55
Your code works fine here:
HTML:
<h2 id="header2"></h2>
JavaScript:
var str = "Test";
document.getElementById("header2").innerHTML = str;
In a full html page it would look like this:
<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.
solution4
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
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()
solution5
-1 2014-05-19 10:39:37
window.onload = function() {
document.getElementById('id').innerHTML = 'str';
}
you need to wait until the page loads
solution6
-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. 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(function() {
document.getElementById("header2").innerHTML = str;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.