如何在 Google Chrome 檢查器中插入 HTML 元素？

Question

我可以雙擊屬性並在 Google Chrome 檢查器中更改它們。 我可以添加 CSS，我可以將 Javascript 添加到控制台。 但是我可以加HTML嗎？

Answer 1

右鍵單擊檢查器中的元素，然后選擇“編輯為HTML”。

然后，您可以在其中添加所需的任何HTML。

---

警告：這會破壞元素及其所有后代，然后在編輯完HTML后重新創建它們。 在任何這些元素上設置的任何事件偵聽器將不再起作用，並且您可能對任何這些元素的任何引用都將丟失。

如果必須保持元素存活，則必須以編程方式執行此操作。 選擇要編輯的元素后，轉到控制台並以編程方式添加所需的元素。 在控制台中，您可以通過變量名$0引用所選元素 。 例如，如果要將div附加到當前選定的元素，請在控制台中鍵入：

$0.appendChild(document.createElement('div')); 

Answer 2

在 Chrome 版本 100.0.4896 中，右鍵單擊檢查器不會顯示上下文菜單。

因此，要添加 HTML 元素，請單擊檢查器左側的三個點，如下圖所示，然后將 select編輯為 HTML 。