使用Chrome开发人员工具向DOM添加元素？

Question

是否可以通过Chrome开发人员工具添加元素到DOM中？例如，选择一个div元素，然后再添加另一个div兄弟？

Answer 1

有如HTML编辑节点3点的工作流程：

• 选择一个节点，以便DevTools高亮显示为蓝色。点击更多图标旁边的节点然后选择编辑为HTML。此图标只显示在当前选定的节点旁边。
• 右键单击任何节点（不必是当前选定的节点），然后选择编辑为HTML。
• 选择您想要编辑的节点，以便DevTools将其突出显示为蓝色。然后按功能 + F2（Mac）或F2（Windows，Linux）。

提交更改：

• 按命令 + 输入（Mac）或控制 + 输入（Windows和Linux）。
• 单击编辑为HTML文本框之外的任何地方。

要放弃：

• 按逃生。

键盘快捷键来源：Elements panel keyboard shortcuts

Answer 2

只是想通了。我们可以点击我们要编辑的元素旁边的三个点(...)，然后选择Edit as HTML，然后从那里继续修改标记。

添加下面的截图：