如何在 Google Chrome 检查器中插入 HTML 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7376594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I insert an HTML element in the Google Chrome inspector?
提问by Flaviu
I can double click on attributes and change them in the Google Chrome inspector. I can add CSS, I can add Javascript to the console. But can I add HTML?
我可以双击属性并在 Google Chrome 检查器中更改它们。我可以添加 CSS，我可以将 Javascript 添加到控制台。但是我可以添加 HTML 吗？
回答by Joseph Silber
Right-click an element in the inspector, and select "Edit as HTML".
右键单击检查器中的元素，然后选择“编辑为 HTML”。
You can then add whatever HTML you want inside of it.
然后，您可以在其中添加您想要的任何 HTML。
Warning:this will destroy the element with all its descendants, and will then recreate them once you're done editing the HTML. Any event listeners set on any of those elements will no longer work, and any references you might have to any of those elements will be lost.
警告：这将破坏元素及其所有后代，然后在您完成编辑 HTML 后重新创建它们。在任何这些元素上设置的任何事件侦听器都将不再起作用，并且您可能对任何这些元素的任何引用都将丢失。
If you have to keep the elements alive, you'll have to do this programmatically. After selecting the element you want to edit, head over to the console and programmatically add the element you want. Within the console, you can reference the selected element by the variable name $0. For example, if you want to append a divto the currently selected element, type this into the console:
如果必须使元素保持活动状态，则必须以编程方式执行此操作。选择要编辑的元素后，转到控制台并以编程方式添加所需的元素。在控制台中，您可以通过变量 name 引用所选元素$0。例如，如果要将 a 附加div到当前选定的元素，请在控制台中键入：
##代码##.appendChild(document.createElement('div'));
