Sarah T. Sarah T. - 5 months ago 9
HTML Question

How to modify .innerHTML text?

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.

Answer

Ignoring 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";