Ajout d'un élément au DOM avec l'outil de développement Chrome?

Question

Est-il possible d'ajouter un élément au DOM avec l'outil de développement Chrome? Par exemple, sélectionnez un élément div, puis ajoutez un autre frère div juste après celui-ci?

Answer 1

Il y a 3 flux de travail pour les nœuds d'édition comme HTML:

• Sélectionnez un nœud afin que DevTools met en surbrillance bleue. Cliquez sur More icône en regard d'un nœud, puis sélectionnez Modifier au format HTML. Cette icône n'apparaît que près du nœud actuellement sélectionné.
• Cliquez avec le bouton droit de la souris sur un nœud (il n'est pas nécessaire d'être sélectionné), puis sélectionnez Modifier au format HTML.
• Sélectionnez le nœud que vous souhaitez modifier afin que DevTools le mette en surbrillance en bleu. Puis appuyez sur Fonction + F2 (Mac) ou F2 (Windows, Linux).

Pour valider vos modifications:

• Appuyez sur Commande +Entrez (Mac) ou contrôle + Entrez (Windows, Linux).
• Cliquez n'importe où en dehors de la zone de texte Modifier au format HTML.

Pour supprimer:

• Press Évasion.

Source pour les raccourcis clavier: Elements panel keyboard shortcuts

Answer 2

Je viens de comprendre. Nous pouvons cliquer sur les trois points (...) à côté d'un élément que nous voulons éditer et sélectionner Edit as HTML, et continuer à modifier le balisage à partir de là.

Ajouté une capture d'écran ci-dessous: