javascript innerhtml does not change content on source code_问答_开发者

javascript innerhtml does not change content on source code

开发者 https://www.devze.com 2023-03-14 04:43 出处：网络

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

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 wor开发者_StackOverflowld!</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>

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)

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.

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.

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