javascript innerhtml does not change content on source code

Question

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I don't know how to solve this. I want to change the (DOM)source code on some event, like this:

script:

<script type="text/javascript">
function ChangeText(){
     document.getElementById("p1").innerHTML="New text!";
}
</script>

html:

<p id="p1">Hello world!</p>
<input type="button" onclick="ChangeText()" value="Change text" />

well, this works fine when I click the button. but when I view the source code.it still looks the same like this:

<html>
    <body>
        <p id="p1">Hello world!</p>
        <input type="button" onclick="ChangeText()" value="Change text" />
    </body>
</html>

instead of:

<html>
    <body>
        <p id="p1">New text!</p>
        <input type="button" onclick="ChangeText()" value="Change text" />
    </body>
</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T20:03:33+0000

Your source code does not change.

Just the DOM

So if you are using firebug or chrome, you could use inspect element to see the change.

See here: http://jsfiddle.net/maniator/eVw7Y/ (this is using your example)