Google ChromeのインスペクタにHTML要素を挿入するにはどうすればよいですか？

Question

属性をダブルクリックしてGoogle Chromeのインスペクタで変更できます。私はCSSを追加することができます、私はコンソールにJavascriptを追加することができます。しかし、私はHTMLを追加することはできますか？

Answer 1

インスペクタで要素を右クリックし、[HTMLとして編集]を選択します。

これで、内部に必要なHTMLを追加できます。

---

警告：これは、そのすべての子孫を持つ要素を破壊する、とあなたはHTMLの編集が完了したら、それらを再作成します。これらの要素のいずれかに設定されたイベントリスナーは機能しなくなり、これらの要素のいずれかにある可能性のある参照は失われます。

要素を有効にしておく必要がある場合は、プログラムでこれを行う必要があります。編集する要素を選択したら、コンソールに移動して、必要な要素をプログラムで追加します。 コンソール内では、選択した要素を変数名$0で参照できます。たとえば、現在選択されている要素にdivを追加する場合は、コンソールに次のように入力します。

$0.appendChild(document.createElement('div'));