javascript innerhtml不会更改源代码上的内容
[英]javascript innerhtml does not change content on source code
问题描述
I don't know how to solve this. 
我不知道如何解决这个问题。 I want to change the (DOM)source code on some event, like this: 我想在某些事件上更改（DOM）源代码，如下所示：
script: 脚本：
<script type="text/javascript">
function ChangeText(){
document.getElementById("p1").innerHTML="New text!";
}
</script>
html: 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>
4 个解决方案
解决方案1
7 已采纳 2011-06-17 19:30:32
Your source code does not change. 您的源代码不会更改。
Just the DOM 只是DOM
So if you are using firebug or chrome, you could use inspect element to see the change. 因此，如果您使用的是firebug或chrome，则可以使用inspect元素查看更改。
See here: http://jsfiddle.net/maniator/eVw7Y/ (this is using your example) 看到这里： http ： //jsfiddle.net/maniator/eVw7Y/ （这是用你的例子）
解决方案2
3 2011-06-17 19:31:40
view source only shows you the source code that was delivered to the browser. view source仅显示传递给浏览器的源代码。 It doesn't show you the source POST page load. 它没有显示源POST页面加载。 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). 因此，您不会看到JS呈现的任何内容（因为JS不会从服务器更改源文件......它只是在浏览器中更改DOM）。
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. 要看到这一点，你需要安装类似FireBug的东西，它可以让你view rendered source ，它将反映通过JS对DOM做出的所有更改。
解决方案3
1 2011-06-17 19:34:17
Using Firefox, install the Web Developer toolbar. 使用Firefox，安装Web Developer工具栏。 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. 使用安装了Firebug的Firefox或Google Chrome，右键单击文档并选择Inspect Element。 On the HTML tab, you can see the source code update instantly as the DOM changes. 在HTML选项卡上，您可以在DOM更改时立即看到源代码更新。
In IE, you can also install the Web Developer toolbar and follow the instructions above. 在IE中，您还可以安装Web Developer工具栏并按照上面的说明进行操作。
解决方案4
0 2015-05-18 12:12:04
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: 除了已发布的基于Firefox扩展和解释的解决方案之外，您还可以在浏览器中输入以下内容后进行Javascript修改后获取源代码：
javascript:document.write("<xmp>"+document.documentElement.innerHTML+"</xmp>");
Make sure you still have the javascript: part if you use Copy/Paste. 如果您使用复制/粘贴，请确保您仍然具有javascript: part。 I tested this in Chrome and IE11 (Windows 7). 我在Chrome和IE11（Windows 7）中对此进行了测试。 Some browsers (like Apple Safari) might require you to enable the "Allow JavaScript in the Address Bar" setting. 某些浏览器（如Apple Safari）可能要求您启用“在地址栏中允许JavaScript”设置。
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). 当您选择“查看源”时，您将HTML（而不是DOM）视为对服务器的HTTP请求的直接响应（在加载任何Javascript之前）。 The DOM, on the other hand, is the same HTML structure that has been modified by JS. 另一方面，DOM与JS修改的HTML结构相同。 More info here: https://developer.apple.com/library/ios/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html 更多信息： https ： //developer.apple.com/library/ios/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandDOM/ResourcesandtheDOM.html
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.