I am trying to use some HTML tag inside JavaScript, but the HTML tag does not work. How can U use an HTML tag inside JavaScript? I wanted to use h1 but did not work.
if (document.getElementById('number1').checked) {
<h1>Hello member</h1>
}
-
1What do you want to achieve with that?Felix Kling– Felix Kling2011-08-17 17:17:30 +00:00Commented Aug 17, 2011 at 17:17
-
I just want to use less javascript and more Html. I dont know a lot abou javascript.user899043– user8990432011-08-17 17:24:05 +00:00Commented Aug 17, 2011 at 17:24
Add a comment
|
6 Answers
You will either have to document.write it or use the Document Object Model:
Example using document.write
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello member</h1>");
}
</script>
Example using DOM
<h1></h1> <!-- We are targeting this tag with JS. See code below -->
<input type="checkbox" id="number1" checked /><label for="number1">Agree</label>
<div id="container"> <p>Content</p> </div>
<script type="text/javascript">
window.onload = function() {
if( document.getElementById('number1').checked ) {
var h1 = document.createElement("h1");
h1.appendChild(document.createTextNode("Hello member"));
document.getElementById("container").appendChild(h1);
}
}
</script>
answered Aug 17, 2011 at 17:16
7 Comments
user899043
So that, you are saying that I cannot use tag inside Javascript, instead I should find equivalent method of Javascript?
GBa
-1, missing parenthesis in the DOM example on the var h1 line. Also this example is useless because it doesn't relate to the check
Richard JP Le Guen
@user899043: Exactly; tags can't go directly in JavaScript code.
rineez
@RichardJPLeGuen I'm wondering how React.js is able to do this. No quotes around HTML code. codepen.io/gaearon/pen/oWWQNa?editors=0010
David Spector
I also would like to know how react can use a JavaScript 'return' to return raw HTML code. No one knows?
|
<html>
<body>
<input type="checkbox" id="number1" onclick="number1();">Number 1</br>
<p id="h1"></p>
<script type="text/javascript">
function number1() {
if(document.getElementById('number1').checked) {
document.getElementById("h1").innerHTML = "<h1>Hello member</h1>";
}
}
</script>
</body>
</html>
1 Comment
Donald Duck is with Ukraine
While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.
This is what I used for my countdown clock:
</SCRIPT>
<center class="auto-style19" style="height: 31px">
<Font face="blacksmith" size="large"><strong>
<SCRIPT LANGUAGE="JavaScript">
var header = "You have <I><font color=red>"
+ getDaysUntilICD10() + "</font></I> "
header += "days until ICD-10 starts!"
document.write(header)
</SCRIPT>
The HTML inside of my script worked, though I could not explain why.
Comments
here's how to incorporate variables and html tags in document.write also note how you can simply add text between the quotes
document.write("<h1>System Paltform: ", navigator.platform, "</h1>");
Comments
JavaScript is a scripting language, not a HTMLanguage type. It is mainly to do process at background and it needs document.write to display things on browser.
Also if your document.write exceeds one line, make sure to put concatenation + at the end of each line.
Example
<script type="text/javascript">
if(document.getElementById('number1').checked) {
document.write("<h1>Hello" +
"member</h1>");
}
</script>
Comments
<div id="demo"></div>
<script type="text/javascript">
if(document.getElementById('number1').checked) {
var demo = document.getElementById("demo");
demo.innerHtml='<h1>Hello member</h1>';
} else {
demo.innerHtml='';
}
</script>
