2011-06-17 5 views
3

私はこれを解決する方法がわかりません。私はこのように、いくつかのイベントで(DOM)ソースコードを変更したい:javascript innerhtmlはソースコードのコンテンツを変更しません

スクリプト:

<script type="text/javascript"> 
function ChangeText(){ 
    document.getElementById("p1").innerHTML="New text!"; 
} 
</script> 

HTML:私はボタンをクリックしたときに

<p id="p1">Hello world!</p> 
<input type="button" onclick="ChangeText()" value="Change text" /> 

だけでなく、これは正常に動作します。しかし、私が見たときにソースcode.itはまだこのように同じになります:

<html> 
    <body> 
     <p id="p1">Hello world!</p> 
     <input type="button" onclick="ChangeText()" value="Change text" /> 
    </body> 
</html> 

の代わり:

<html> 
    <body> 
     <p id="p1">New text!</p> 
     <input type="button" onclick="ChangeText()" value="Change text" /> 
    </body> 
</html> 
+1

それはそうです。ソースコードは変更されません。 –

+0

私はソースコードを変更できると思いました。すべての提案が考慮されます。皆さん、ありがとう。 – bingjie2680

答えて

7

をあなたのソースコードは変更されません。だから、

ただ、DOM

あなたが放火犯やクロムを使用している場合は、変更を確認するための要素を点検し使用することができます。

+3

Firebug Lite:http:// getfirebugをチェックしてください。com/firebuglite - 任意のブラウザ(IEを含む)でFirebugの縮小版を使用できます –

+0

Firebugが死んでいます –

3

view sourceだけであなたのブラウザに配信されたソースコードを示します(これはあなたの例を使用している)http://jsfiddle.net/maniator/eVw7Y/

はこちらを参照してください。ソースPOSTページの読み込みは表示されません。だからあなたはJSによってレンダリングされたものは見ないでしょう(JSはサーバーからソースファイルを変更していないのでブラウザのDOMを変更するだけです)。

これを見るには、FireBugのようなものをインストールする必要があります。view rendered sourceは、JSを介してDOMに加えられたすべての変更を反映します。

1

Firefoxを使用してWeb Developerツールバーをインストールします。次に、[View Source]で、[View Generated Source]をクリックします。

FirebugがインストールされているFirefoxまたはGoogle Chromeを使用して、ドキュメントを右クリックし、[要素の検査]を選択します。 [HTML]タブでは、DOMが変更されるとすぐにソースコードが更新されます。

IEでは、Web Developerツールバーをインストールして上記の手順に従うこともできます。

0

すでに掲載Firefoxの拡張機能と説明に基づくソリューションに加えて、あなたはまた、Javascriptの変更は、ブラウザでこれを入力した後、ソースコードを取得することができます。

javascript:document.write("<xmp>"+document.documentElement.innerHTML+"</xmp>"); 

を使用する場合は、まだjavascript:部分を持っていることを確認してくださいコピーペースト。 私はこれをChromeとIE11(Windows 7)でテストしました。一部のブラウザ(Apple Safariなど)では、[アドレスバーにJavaScriptを許可する]設定を有効にする必要があります。

「ソースの表示」を選択すると、サーバーへのHTTPリクエストの直接の応答としてHTML(DOMではなく)が表示されます(Javascriptがロードされる前)。一方、DOMはJSによって変更されたのと同じHTML構造です。詳細はこちら:https://developer.apple.com/library/ios/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html

関連する問題