javascript innerhtml does not change content on source code

Asked 17/6, 2011 at 19:29 Answered 18/5, 2015 at 12:12

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>

Ridenhour answered 17/6, 2011 at 19:29 Comment(2)

That's the way it is. The source code does not change. – Szabadka 17/6, 2011 at 19:35

ok, I thought I could change the source code. all suggestion are considered. thank you very much, guys. – Ridenhour 17/6, 2011 at 19:39

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)

Hanser answered 17/6, 2011 at 19:30 Comment(2)

Check out Firebug Lite: getfirebug.com/firebuglite - it lets you use a scaled-down version of Firebug in any browser (Including IE) – Anamorphic 17/6, 2011 at 19:33

Firebug is dead – Ferriage 27/11, 2017 at 3:43

view source only shows you the source code that was delivered to the browser. It doesn't show you the source POST page load. So you're not going to see anything rendered by JS (as the JS isn't changing the source file from the server...it's just changing the DOM in the browser).

To see that, you need to install something like FireBug which will let you view rendered source which will reflect all changes made to the DOM via JS.

Tan answered 17/6, 2011 at 19:31 Comment(0)

Using Firefox, install the Web Developer toolbar. Then under View Source, click View Generated Source.

Using Firefox with Firebug installed, or Google Chrome, right click on the document and choose Inspect Element. On the HTML tab, you can see the source code update instantly as the DOM changes.

In IE, you can also install the Web Developer toolbar and follow the instructions above.

Eastward answered 17/6, 2011 at 19:34 Comment(0)

Besides the solutions based on Firefox extensions and explanations already posted, you can also get the source code after Javascript modifications typing this in your browser:

javascript:document.write("<xmp>"+document.documentElement.innerHTML+"</xmp>");

Make sure you still have the javascript: part if you use Copy/Paste. I tested this in Chrome and IE11 (Windows 7). Some browsers (like Apple Safari) might require you to enable the "Allow JavaScript in the Address Bar" setting.

When you select “View Source”, you view the HTML (not the DOM) as a direct response of the HTTP request to the server (before any Javascript is loaded). The DOM, on the other hand, is the same HTML structure that has been modified by JS. More info here: https://developer.apple.com/library/ios/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html

Kingfisher answered 18/5, 2015 at 12:12 Comment(0)

Recommended topics

Hot tags