Wie erstelle ich ein Element in den Chrome-Entwicklungstools?

Question

Ich möchte der Seite in Chrome Dev-Tools ein neues Element hinzufügen. Das scheint eine ziemlich offensichtliche Funktionalität zu sein, aber ich kann es nicht finden.

Ermöglicht Chrome das Erstellen von Elementen im DOM-Tab? Ich weiß, dass ich etwas aus der JS-Konsole machen könnte, aber lieber etwas auf der DOM-Registerkarte.

Answer 1

Einfach Rechtsklick auf das übergeordnete Element, ändern zu ‚bearbeiten als HTML‘ und dann hinzufügen, was Elemente Sie wollen ...

Answer 2

Nach der Dokumentation der F2 Taste, um das ausgewählte Element in die und aus der Bearbeitung wechseln sollte Modus, so dass Sie ein Element hinzufügen können.

Leider verwende ich ein Chromebook, das keine F2-Taste hat.

Answer 3

Oder Sie könnten einfach die Konsole hochfeuern und ein Element anhängen. Zum Beispiel waren, wenn ich die unten auf dieser besonderen stackoverflow.com Post zu tun:

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

Ich würde dann sehen, das neu angehängten Element sofort sichtbar in der Registerkarte Elemente:

Answer 4

gedrückter Ctrl-Taste im Elements Panel und Edit as HTML Auswahl ist wahrscheinlich der beste Weg zu gehen, aber man kann auch in der Konsole (für Neugier willen, und ohne die Notwendigkeit für jQuery):

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

Prost!