Come posso creare un elemento in Chrome Dev Tools?

Question

Vorrei aggiungere un nuovo elemento alla pagina negli strumenti di Chrome Dev. Sembra una funzionalità abbastanza ovvia ma non riesco a trovarlo.

Chrome consente di creare elementi nella scheda DOM? Mi rendo conto che potrei creare qualcosa dalla console JS, ma preferirei qualcosa sulla scheda DOM.

Answer 1

Basta fare clic destro sul elemento padre, passare alla 'Modifica come HTML' e quindi aggiungere tutto quello che vuoi ... elementi

Answer 2

Secondo la documentazione il tasto F2 dovrebbe attivare l'elemento selezionato dentro e fuori di modifica modalità in modo da poter aggiungere un elemento all'interno.

Sfortunatamente, sto utilizzando un Chromebook privo di chiave F2.

Answer 3

Oppure è possibile attivare la console e aggiungere un elemento. Per esempio, se dovessi fare il seguito di questo post particolare stackoverflow.com:

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

mi piacerebbe poi vedere l'elemento appena aggiunto immediatamente visibile nella scheda Elementi:

Answer 4

il tasto Control nel pannello Elements e selezionando Edit as HTML è probabilmente il modo migliore per andare, ma si potrebbe anche nella console (per curiosità, e senza necessità di jQuery):

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

Cheers!