Geek asks and answers

Javascript innerhtml does not change source code content

I do not know how to solve this. I want to change the source code (DOM) to some kind of event, for example:

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

Ok, this works great when I click the button. but when I look through the source code. it still looks like this:

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

instead:

<html>
    <body>
        <p id="p1">New text!</p>
        <input type="button" onclick="ChangeText()" value="Change text" />
    </body>
</html>
+3
source share
4 answers

The source code does not change.

Just a DOM

So, if you use firebug or chrome, you can use the validation element to see the change.

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

+7
source

view source , . POST. , , JS ( JS ... DOM ).

, - FireBug, view rendered source, , DOM JS.

+3

Firefox, -. " " " ".

Firefox Firebug Google Chrome, " ". HTML DOM.

IE - .

+1

, Firefox , , Javascript, :

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

, javascript:, Copy/Paste. Chrome IE11 (Windows 7). (, Apple Safari) " JavaScript ".

When you select "View Source", you are viewing the HTML (and not the DOM) as a direct response of the HTTP request to the server (before loading Javascript). The DOM, on the other hand, is the same HTML structure that was modified by JS. More details here: https://developer.apple.com/library/ios/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html

0
source

More articles:


All Articles