如何在 Google Chrome 检查器中插入 HTML 元素？答案

【问题标题】：How do I insert an HTML element in the Google Chrome inspector?如何在 Google Chrome 检查器中插入 HTML 元素？
【发布时间】：2011-11-14 15:37:17
【问题描述】：

我可以双击属性并在 Google Chrome 检查器中更改它们。我可以添加 CSS，我可以将 Javascript 添加到控制台。但是我可以添加 HTML 吗？

【问题讨论】：

Mozilla Firefox 中的 Inspector 允许粘贴节点甚至 HTML 字符串。

标签： html google-chrome

【解决方案1】：

在检查器中右键单击一个元素，然后选择“编辑为 HTML”。

然后您可以在其中添加任何您想要的 HTML。

警告：这将破坏元素及其所有后代，然后在您完成 HTML 编辑后重新创建它们。对这些元素中的任何一个设置的任何事件侦听器都将不再起作用，并且您对任何这些元素可能拥有的任何引用都将丢失。

如果您必须让元素保持活动状态，则必须以编程方式执行此操作。选择要编辑的元素后，转到控制台并以编程方式添加所需的元素。 在控制台中，您可以通过变量名称$0 引用所选元素。例如，如果您想将div 附加到当前选定的元素，请在控制台中输入：

$0.appendChild(document.createElement('div'));

【讨论】：

节省时间！谢谢！
自我注意：如果这似乎不起作用，请仔细检查您的拼写。例如，如果您忘记了 # 并输入了 &x2044;，Chrome 就会将其视为您输入了 &amp;x2004;...