javascript innerhtml does not change content on source code

Question

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>

Naftali · Accepted Answer

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)

Donate For Us