javascript innerhtml 不会更改源代码上的内容
Posted
技术标签:
【中文标题】javascript innerhtml 不会更改源代码上的内容【英文标题】：javascript innerhtml does not change content on source code 【发布时间】：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/（这是使用您的示例）
【讨论】：
查看 Firebug Lite：getfirebug.com/firebuglite - 它允许您在任何浏览器（包括 IE）中使用缩小版的 Firebug 萤火虫死了【参考方案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
【讨论】：
以上是关于javascript innerhtml 不会更改源代码上的内容的主要内容，如果未能解决你的问题，请参考以下文章
如何将 innerHTML 保存到 Javascript 变量中，以便在更改实际的 innerHTML 时保持不变
更改基本 HTML/Javascript 页面的 innerHTML 问题
Javascript - .innerHTML 更改自动关闭标签
HTML 敏捷包 - ReplaceNode 不会更改正文的 InnerHTML