我想在 Chrome 开发工具的页面中添加一个新元素。这似乎是相当明显的功能，但我似乎找不到它。
Chrome 是否允许我在 DOM 选项卡中创建元素？我意识到我可以从 JS 控制台制作一些东西，但更愿意在 DOM 选项卡上制作一些东西。
问问题
8466 次
4 回答
17
只需右键单击父元素，更改为“编辑为 HTML”，然后添加您想要的任何元素...
于 2012-10-26T16:27:42.543 回答
5
根据文档， F2 键应将所选元素切换进和退出编辑模式，以便您可以在其中添加元素。
不幸的是，我使用的是没有 F2 键的 Chromebook。
于 2012-10-28T15:27:39.873 回答
2
或者您可以启动控制台并附加一个元素。例如，如果我要在这个特定的 stackoverflow.com 帖子上执行以下操作：
$('.postcell').append('<code>Testing Element Insertion via Chrome</code>');
然后我会在 Elements 选项卡中立即看到新添加的元素：
于 2013-10-26T23:36:29.593 回答
0
在Elements面板中按住 Control 单击并选择Edit as HTML可能是最好的方法，但您也可以在控制台中（出于好奇，不需要 jQuery）：
var child = document.createElement('div');
var parent = document.getElementByClassName('parent');
parent.appendChild(child);
干杯!
于 2014-06-25T23:23:50.037 回答