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?

Solution 1:

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'));