How to create an item in Chrome Dev tools?

Question

I want to add a new element to a page in Chrome Dev tools. This seems like pretty obvious functionality, but I can't find it.

Does Chrome provide the ability to create elements in the DOM tab? I understand that I can do something from the JS console, but rather something on the DOM tab.

Answer 1

Just right-click on the parent element, change to "Edit as HTML" and then add all the elements you want ...

Answer 2

According to the documents, the F2 key should switch the selected item to and from the editing mode, so you can add the item inside.

Sorry, I'm using a Chromebook that doesn't have an F2 key.

Answer 3

Or you can just start the console and add an item. For example, if I were to do this below in this stackoverflow.com column:

$('.postcell').append('<code>Testing Element Insertion via Chrome</code>'); 

Then I will see that the newly added item is immediately displayed on the "Elements" tab:

Answer 4

A control click on the Elements panel and selecting Edit as HTML is probably the best way, but you can also use the console (for the sake of curiosity and without the need for jQuery):

 var child = document.createElement('div'); var parent = document.getElementByClassName('parent'); parent.appendChild(child); 

Hurrah!