2

私のコードは次のとおりです。

window.onload = initialise;

function initialise() {

    var objPForSubmitMsg = document.createElement('p');
    objPForSubmitMsg.setAttribute('class', 'submitmsg');

    var arObjForms = document.getElementsByTagName('form');

    for (i = 0; i < arObjForms.length; i++) {
        var objFormParent = arObjForms[i].parentNode;
        alert(objFormParent);
        objFormParent.insertBefore(objPForSubmitMsg, arObjForms[i]);
    }

} // end initialise().

アラートで機能を確認したところ、通過しました。関数initialise()が完了した後にページの「ソースを表示」すると、新しい要素は追加されません。

したがって、私の最初の質問は件名の通りです。javascript で挿入された新しい要素をビューソースで見ることができますか?

はいの場合、上記のコードの何が問題になっていますか? 新しい要素を挿入しないのはなぜですか?

また、ボタンからinitialise()を呼び出そうとしましたが、何も起こりません。

私はjavascriptが初めてなので、コメントをいただければ幸いです。

編集：みんなありがとう。わかりました、ビューソースはそれを見ることができません...

ページを php に渡して次のようにロードする場合よりも: $page = file_get_contents("mypage.html"); 、それを次のようにエコーバックすると: echo $page; 次に、新しく作成された要素もそこに表示されないと思いますか?

その場合、新しく作成された js 要素を含む全体をどのように php に渡しますか?

4

4 に答える 4

3

ブラウザーでソースを表示すると、ページの元の HTML ソースが表示されます。これは、クライアント側の変更が行われる前にサーバーから取得されたものとまったく同じです。

そのため、javascript によって行われたページへの動的な変更は含まれません。

動的に行われた変更を表示するには、DOM インスペクターを使用します。Safari と Chrome と IE に組み込まれているものがあり、Firebug は Firefox のアドオンです。All は、DOM 階層全体を表示し、現在ブラウザーに存在するのとまったく同じように表示します。実際、インスペクターでライブ DOM を自分で変更することもできます。

現在のコードは、空の<p>タグを挿入していますが、これは空であるため表示されない可能性があります。タグにコンテンツを入れる<p>と、1 つのタグがページに正常に挿入<p>されます。1つしか作成せず、各フォームの前に同じタグを挿入しようとするため、1つしか挿入されません。現在のコードが何をしているかは、http: //jsfiddle.net/jfriend00/3fvbj7re/で確認できます。

ページ内の各フォームの前にタグを挿入する場合は、次のように挿入ごとに個別のタグ<p>を作成する必要があります。<p>

function initialise() {
    var arObjForms = document.getElementsByTagName('form');
    var objPForSubmitMsg;

    for (i = 0; i < arObjForms.length; i++) {
        objPForSubmitMsg = document.createElement('p');
        objPForSubmitMsg.innerHTML = "hello";    // give tag some content
        objPForSubmitMsg.setAttribute('class', 'submitmsg');
        var objFormParent = arObjForms[i].parentNode;
        objFormParent.insertBefore(objPForSubmitMsg, arObjForms[i]);
    }

}

window.onload = initialise;
于 2014-08-09T06:32:02.833 に答える
2

実行時に追加する Dom 要素は、ページが初めて読み込まれたときには存在しませんでした。つまり、元のページの一部ではありませんでした。

元のページのソースを表示すると、ソースで HTMl のみを調べるため、JS や CSS を実行せずに HTMl のみが表示されます。

したがって、動的な html 要素をページに追加しても、[ソースを表示] をクリックしてもそれらを見ることはできません。

これらの要素を表示するには、ブラウザーの開発者コンソールを使用する必要があります。

于 2014-08-09T06:26:40.797 に答える
0

現在の DOM を確認したい場合は、元の応答本文であるソースではなく、コード インスペクター (開発者ツール) または JavaScript コンソールを使用する必要があります。

たとえば、Chrome では、[view] -> [developer] -> [developer tools] に移動します。

于 2014-08-09T06:21:42.007 に答える
0

ビューソースで表示できないからといって、新しく作成した要素に document.getElementById('el-id') などを使用してアクセスできないわけではありません。トピックから少し外れますが、注意することが重要です。

于 2020-03-17T03:51:59.043 に答える