使用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，然後從那裏繼續修改標記。

添加下面的截圖：