2012-02-02 13 views
0

JQueryを使用して動的ボタンを作成すると、Webページのソースコードを参照すると、まだ表示されているようなものが表示されます$("<input>", { "id": "myid", "type"... <input id="Button1" type="button" value="button" /> どうすればいいですか?動的に挿入された要素から生成されたHTMLを取得するにはどうすればよいですか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("<input>", { "id": "myid", "type": "button", "value": "Confirm", "name": "comfire" }).appendTo("#tablemsgbox"); 
     $("#myid").click(function() { 
      alert($(this).val()); 
     }); 
    }); 
</script> 
</head> 

<body> 
    <input id="Button1" type="button" value="button" /> 
    <div id="tablemsgbox"> 
    </div> 
</body> 
</html> 
+0

Firebugのようなツールを使用する場合は、DOMに表示されるはずです。 –

答えて

1

ソースを表示すると、サーバーによって生成された元のページが表示されますが、javascriptで行われたDOM操作は表示されません。 js操作後にDOMの状態を確認するには、Firebug for Firefox、Chrome Inspector、IE開発ツールなどのツールを使用します。あなただけ生成された要素のHTMLをしたい場合は

1

、あなただけの次の操作を行います。

$('#myid')[0].outerHTML 

Demo.結果は、ブラウザによって異なります。

しかし、ページを右クリックして[ソースの表示]をクリックすると、挿入された要素が残りのソースとともに表示されますが、それは起こりません。

HTMLソースは、DOMのシリアライズされた表現です。ブラウザは、HTMLを解析してDOMを表すメモリ内のデータ構造に変換し、それを処理します。あなたのスクリプトが影響を受けていないので、あなたがDOM afterwordに(スクリプトを介して)行うことは、 'source'に反映されません。 Firebug(または他の開発ツール)があなたに示しているのは、DOMの解析済みで現在の状態です。 innerHTML/outerHTMLを経由して、あなたがHTMLに再シリアライズにDOMをブラウザに依頼することができ、言っ

。ただし、再シリアル化されたHTMLは、–というスクリプトでDOMを変更しない場合でも、元のソース–と同じになることは保証されていません。これは、HTMLの醜いマークアップの許しの性質です。実際—で

極端な例—としてあなたがXML with an XSLT transform としてWebページを提供するのに十分な愚かなら、再シリアル化されたHTMLは元のソースコードのようなabsoluely何も見えません。あなたは全体のDOMの現在の状態の再直列化表現を見たい場合は

しかし、あなたはここから取得する文字列を見て:

document.documentElement.outerHTML 

これを行うことはありません。 Seriously.

+0

ありがとう!私はソースコード http://jsfiddle.net/josh3736/pVXaj/で見つけられず、Firebug canそれをやる。 – HelloCW

+0

@ user828896:回答の更新をご覧ください。 – josh3736

関連する問題