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

Question

是否可以使用Chrome开发人员工具向DOM添加元素？例如，选择一个div元素，然后在其后添加另一个div兄弟？

Answer 1

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

在下面添加了截图：

Answer 2

将节点编辑为HTML的工作流程有3个：

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

提交更改：

• 按命令 + 输入（Mac）或控制 + 输入（Windows，Linux）。
• 点击编辑为HTML 文本框之外的任何位置。

丢弃：

• 按 Escape 。

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