Chrome Dev Toolsで要素を作成するにはどうすればよいですか？

Question

Chrome Devツールのページに新しい要素を追加します。これはかなり明白な機能のようですが、私はそれを見つけることができません。

ChromeはDOMタブで要素を作成できますか？私はJSコンソールから何かを作ることができるが、DOMタブでは何かを作ると思う。

Answer 1

ちょうどいいのドキュメントによると、F2キーが編集の内と外、選択された要素を切り替える必要があり、親要素をクリックして「HTMLとして編集」に変更して、あなたが好きな要素を追加...

Answer 2

モードで、要素を追加することができます。

残念ながら、私はF2キーを持たないChromebookを使用しています。

Answer 3

または、コンソールを起動して要素を追加するだけでもかまいません。例えば、私はこの特定のstackoverflow.comポストに以下の操作を行うとしたら：

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

私はその後要素]タブに新しく追加要素がすぐに目に見える参照してくださいね。

Answer 4

Controlキーを押しながらクリックElementsパネルとEdit as HTMLを選択するには、おそらく行くには最高の方法ですが、あなたの可能性もコンソールで（、とjQueryを必要とせず、好奇心のために）：

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

乾杯を！