admin管理员组文章数量:1323524
So this is what I have in my body tag:
<div class="my-block">
<p id="demo">
<font size="5">Old text<br><br>
<b><text onClick="myFunction()">Click here to continue!</text></b></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "New text";
}
</script>
</font>
</div>
That works in replacing the text like I wanted it to, but the formatting (like text size) changes to default in the .innerHTML and I can't seem to figure out how to get it back. I can make it bold, small, etc., but I want to change the size to 5 like the rest. I tried to put the font face tag in the quotations (and outside the quotations) with "new text":
document.getElementById("demo").innerHTML = "<font size="5"> New text </font>";
but it didn't work, even though that works with bold and small.
So this is what I have in my body tag:
<div class="my-block">
<p id="demo">
<font size="5">Old text<br><br>
<b><text onClick="myFunction()">Click here to continue!</text></b></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "New text";
}
</script>
</font>
</div>
That works in replacing the text like I wanted it to, but the formatting (like text size) changes to default in the .innerHTML and I can't seem to figure out how to get it back. I can make it bold, small, etc., but I want to change the size to 5 like the rest. I tried to put the font face tag in the quotations (and outside the quotations) with "new text":
document.getElementById("demo").innerHTML = "<font size="5"> New text </font>";
but it didn't work, even though that works with bold and small.
Share Improve this question edited Jun 22, 2016 at 3:22 Phil 165k25 gold badges262 silver badges267 bronze badges asked Jun 22, 2016 at 3:04 Sarah T.Sarah T. 231 gold badge1 silver badge5 bronze badges 9- face="" is looking for a font-type or font-name, like Arial, but you've given it a "5" which is meaningless. If you want to change the size you need to use size="" like you did above. – skyline3000 Commented Jun 22, 2016 at 3:08
-
i think your inner html is not valid. you can try something like this.
document.getElementById("demo").innerHTML = "<span style='font-size: 30px; font-family: sans-serif;'> New text </span>";
– wathmal Commented Jun 22, 2016 at 3:09 -
2
Your markup is a mess. The
</p>
and</font>
are in the wrong order and there is no<text>
tag in HTML – Phil Commented Jun 22, 2016 at 3:11 - 1 For info, not supported any more in HTML5: w3schools./tags/tag_font.asp – ManoDestra Commented Jun 22, 2016 at 3:12
- skyline: Whoops, yeah I accidentally put face instead of size. I'm kind of a mess. Thanks for the help guys! – Sarah T. Commented Jun 22, 2016 at 3:20
4 Answers
Reset to default 3Ignoring your invalid markup for now, your quotes are nested incorrectly (double-quotes in a double-quoted string). Try
document.getElementById("demo").innerHTML = '<font size="5">New text</font>';
Alternatively, just target the <font>
tag
document.querySelector('#demo > font').innerHTML = "New Text";
Simply use a css style in the paragraph. "font-size" does the job.
<div class="my-block">
<p id="demo" style="font-size:25px";>
Old text<br><br>
<b><text onClick="myFunction()">Click here to continue!</text></b></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "New text";
}
</script>
</div>
This is your code :
<div class="my-block">
<p id="demo">
<font size="5">Old text<br><br>
<b><text onClick="myFunction()">Click here to continue!</text></b></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "New text";
}
</script>
</font>
</div>
This is it should be :
<div class="my-block">
<p id="demo">
<font size="5">Old text<br><br>
<b><text onClick="myFunction()">Click here to continue!</text></b>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "New text";
// or u can do this too :
document.getElementById("demo").innerHTML = "<font size="5"> New text </font>";
}
</script>
</font>
</p>
</div>
Look at the <p></p>
tag
But just for your information, <font></font>
tag is not supported in HTML5
Check your quotes. You can't have "" inside "" without escaping them but you can have "" inside '' vice versa. Also the 'font' tag is deprecated.
document.getElementById("demo").innerHTML = '<span style="font-weight: bold; font-size: 25px"> New text </font>';
本文标签: javascriptHow to modify innerHTML textStack Overflow
版权声明:本文标题:javascript - How to modify .innerHTML text? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742131596a2422185.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论