CODEWITHSUNDEEP
htmlgoogle-chrome
Flaviu
Flaviu

Reputation: 6294

How do I insert an HTML element in the Google Chrome inspector?

I can double click on attributes and change them in the Google Chrome inspector. I can add CSS, I can add Javascript to the console. But can I add HTML?

Upvotes: 61

Views: 50359

Answers (2)

abdella
abdella

Reputation: 734

In Chrome version 100.0.4896 Right-click in the inspector doesn't show the context menu.

So to add HTML element click on the three dots on the left side of the inspector as showing in the below snapshots and select Edit as HTML. enter image description here

Upvotes: 1

Joseph Silber
Joseph Silber

Reputation: 219940

Right-click an element in the inspector, and select "Edit as HTML".

You can then add whatever HTML you want inside of it.

Warning: this will destroy the element with all its descendants, and will then recreate them once you're done editing the HTML. Any event listeners set on any of those elements will no longer work, and any references you might have to any of those elements will be lost.

If you have to keep the elements alive, you'll have to do this programmatically. After selecting the element you want to edit, head over to the console and programmatically add the element you want. Within the console, you can reference the selected element by the variable name $0. For example, if you want to append a div to the currently selected element, type this into the console:

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

Upvotes: 88

Related Questions