javascript - How to modify .innerHTML text?

Question

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 1

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