javascript - How to modify .innerHTML text? - Stack Overflow

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.

• javascript
• html

Share Improve this question Follow edited Jun 22, 2016 at 3:22 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Jun 22, 2016 at 3:04 Sarah T.Sarah T. 2311 gold badge11 silver badge55 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

 |  Show 4 more ments

4 Answers 4

Sorted by: Reset to default 3

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

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