Chrome開発者ツールを使用してDOMに要素を追加しますか？

Question

Chrome開発ツールを使用してDOMに要素を追加することはできますか？たとえば、div要素を選択し、直後に別のdiv兄弟要素を追加しますか？

Answer 1

をHTMLなどの編集ノードの3つのワークフローあります：

• はデベロッパーツールは、それが青いハイライト表示されるようにノードを選択します。 ノードの横にあるアイコンをクリックし、として編集を選択します。このアイコンは、現在選択されているノードの横にのみ表示されます。
• 任意のノード（現在選択されている必要はありません）を右クリックし、として編集を選択します。
• 編集するノードを選択して、DevToolsが青色を強調表示するようにします。 ファンクション + F2（Mac）またはF2（Windows、Linux）を押します。

は、あなたの変更をコミットするには、次の

• 押しコマンド + がする（Windows、Linux）を入力します（Mac）またはコントロール + を入力します。
• として編集するテキストボックス。
  • を押してエスケープ：破棄するよう

  。キーボードショートカットのための

出典：Elements panel keyboard shortcuts

Answer 2

ちょっと分かりました。編集したい要素の隣にある3つの点(...)をクリックしてEdit as HTMLを選択し、そこからマークアップを変更します。

は、下のスクリーンショットを追加しました：