如何在Chrome开发工具中创建元素？

Question

我想在Chrome开发工具中为页面添加一个新元素。这似乎是相当明显的功能，但我似乎无法找到它。

Chrome允许我在DOM标签中创建元素吗？我意识到我可以从JS控制台制作一些东西，但宁愿选择DOM选项卡上的东西。

Answer 1

右键单击父元素，更改为“编辑为HTML”，然后添加您想要的任何元素......

Answer 2

根据文档，F2键应该切换选定的元素进出编辑模式，这样你就可以在其中添加一个元素。

很遗憾，我使用的是没有F2密钥的Chromebook。

Answer 3

或者您可以启动控制台并附加元素。例如，如果我在这个特定的stackoverflow.com帖子上执行以下操作：

$('.postcell').append('<code>Testing Element Insertion via Chrome</code>');

然后我会在Elements选项卡中看到新添加的元素立即可见：

Answer 4

按住Ctrl键并单击Elements面板，选择Edit as HTML可能是最好的方法，但你也可以在控制台中（为了好奇，不需要jQuery）：< / p>

var child = document.createElement('div');
var parent = document.getElementByClassName('parent');
parent.appendChild(child);

干杯！