web-dev-qa-db-ja.com

jQueryDOMの変更がビューソースに表示されない

ここで簡単な質問があります。 jQueryを使用すると、次のような操作を行うことで、DOMにHTML要素を動的に追加できることを知っています。

$('').append('<p>Test</p>');

しかし、私の質問は、なぜこれらの要素が実際にコードに視覚的に表示されないのかということです（たとえば、ブラウザーでソースを表示する場合）。

専門家にお願いします、理由を教えてください。ありがとう

javascriptjquerydomjquery-selectorsappend
18
user765368

元のソースは変更されません。 DOMのみが変更されます。

ブラウザの開発者ツールを使用して、DOMの変更をHTMLで視覚化できます。

DOMを操作するときは、HTMLを操作することは決してないことに注意してください。開発者ツールによって提供されるHTMLの視覚化は、DOMの現在の状態の解釈です。 HTMLマークアップの実際の変更はありません。

25
user1106925

[ソースの表示]には、元々ブラウザに送信されたHTMLのみが表示されるためです。ただし、変更されたHTMLを確認する方法はいくつかあります-FirefoxのFirebug、IEまたはChromeのF12開発者ツール。いくつかのHTMLを選択し、Firefoxの[選択ソースの表示]を右クリックすることもできます。

7
mikel

「ソースの表示」には、ブラウザがサーバーに特定のWebページを要求したときにサーバーが送信したソースのみが表示されます。したがって、これらの変更はクライアント側で行われたため、元のページが配信された後に行われたため、「ソースの表示」には表示されません。

ページのライブソースを表示するには、WebkitブラウザーのWeb Inspectorビュー、またはFirefoxのFirebugを使用できます。これらはDOMへの変更を追跡し、表示可能なソースを更新します。

5
Indranil

Web開発ツール（Firefoxアドオン）にはオプションがあります "View generated source "これにより、変更を加えた後に生成されるソースコード全体が提供されます。

view source->View generated source
3
Prasanth Bendra

IE/Firefox/Chromeの開発ツールがDOMに追いついていない場合があります。これは、ジェダイに値するコードを扱っていること、またはダースベイダーがデバッグのためにそこに残したことを意味します。

0
BraveNewMath