如何在Google Chrome检查器中插入HTML元素？ [英] How do I insert an HTML element in the Google Chrome inspector?

问题描述

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

解决方案

在检查器中右键单击一个元素，然后选择Edit as HTML p>

然后，您可以在其中添加任何HTML。

> 警告：这会破坏包含所有后代的元素，然后在完成编辑HTML后重新创建它们。任何设置在这些元素上的事件监听器都将不再工作，任何对这些元素的引用都将丢失。

如果必须保留活着的元素，你将不得不以编程的方式来做到这一点。选择要编辑的元素后，转到控制台并以编程方式添加所需的元素。 在控制台中，您可以通过变量名称 $ 0 引用选定的元素。例如，如果要将 div 添加到当前选定的元素，请在控制台中输入以下内容：

  $ 0.appendChild（document.createElement（'div'））; 
  

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?

解决方案

Right-click an element in the inspector, and select "Edit as HTML".

You can then add whatever HTML you want inside of it.

---

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.

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 div to the currently selected element, type this into the console:

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

这篇关于如何在Google Chrome检查器中插入HTML元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！