Question

我不知道如何解决这个问题。我想在某些事件上更改（DOM）源代码，如下所示：

脚本：

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

嗯，单击按钮时这很好用。但是当我查看源代码时，它仍然看起来像这样：

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

而不是：

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

Answer 1

您的源代码不会更改。

只是DOM

因此，如果您使用的是firebug或chrome，则可以使用inspect元素查看更改。

请参阅此处：http://jsfiddle.net/maniator/eVw7Y/（这是使用您的示例）

Answer 2

view source仅显示已提供给浏览器的源代码。它没有显示源POST页面加载。因此，您不会看到JS呈现的任何内容（因为JS不会从服务器更改源文件......它只是在浏览器中更改DOM）。

要看到这一点，你需要安装类似FireBug的东西，它会让你view rendered source反映通过JS对DOM做出的所有更改。

Answer 3

使用Firefox，安装Web Developer工具栏。然后在“查看源”下，单击“查看生成的源”。

使用安装了Firebug的Firefox或Google Chrome，右键单击文档并选择Inspect Element。在HTML选项卡上，您可以在DOM更改时立即看到源代码更新。

在IE中，您还可以安装Web Developer工具栏并按照上面的说明进行操作。

Answer 4

除了已经发布的基于Firefox扩展和解释的解决方案之外，您还可以在浏览器中输入Javascript后修改源代码：

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

如果您使用复制/粘贴，请确保您仍然拥有javascript:部分。我在Chrome和IE11（Windows 7）中对此进行了测试。某些浏览器（如Apple Safari）可能要求您启用“在地址栏中允许JavaScript”设置。

当您选择“查看源”时，您将HTML（而不是DOM）视为对服务器的HTTP请求的直接响应（在加载任何Javascript之前）。另一方面，DOM与JS修改的HTML结构相同。更多信息：https://developer.apple.com/library/ios/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html