javascript innerhtml 不会更改源代码上的内容答案

【问题标题】：javascript innerhtml does not change content on source codejavascript innerhtml 不会更改源代码上的内容
【发布时间】：2011-09-17 11:07:31
【问题描述】：

我不知道如何解决这个问题。我想更改某些事件的（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>

【问题讨论】：

【解决方案1】：

您的源代码不会改变。

只是 DOM

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

请看这里：http://jsfiddle.net/maniator/eVw7Y/（这是使用您的示例）

【讨论】：

【解决方案2】：

view source 仅向您显示传递给浏览器的源代码。它不会向您显示源 POST 页面加载。所以你不会看到 JS 渲染的任何东西（因为 JS 不会从服务器更改源文件......它只是更改浏览器中的 DOM）。

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案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

【讨论】：