単純なcreateElementコマンドがJSで動作し、HTML DOMに要素を作成しないのはなぜですか？

この質問はすべての回答の中で最も単純かもしれませんが、わかりません。単純なcreateElementコマンドがJSで動作し、HTML DOMに要素を作成しないのはなぜですか？

私は基本的にシンプルなHTMLコードはJavaScriptを使用して

<p></p>

を複製したかったです。私の単純な書き込みHTMLで<p></p>ならば、私は次のようにレンダリングの要素を取得します：

<html><head></head><body><p></p></body></html>

私はhtmlファイルを作成し、その中に以下のコードを書きました。

<script> 
    var para = document.createElement('p'); 
</script>

私はブラウザでこのファイルをレンダリングし、次の要素がレンダリングされていることを発見しました。

<html> 
    <head> 
     <script> 
      var para = document.createElement('p'); 
     </script> 
    </head> 
    <body></body> 
</html>

明らかに私の要素は作成されません。私の推測では、私は親を指定していないので、それを作成していませんでした。

<script> 
    var body = document.getElementsByTagName('body')[0]; 
    var para = document.createElement('p'); 

    body.appendChild(para); 
</script>

それでも、私はそれが動作するように取得していない：ボディはデフォルトDOM要素ですので、私はそのように、私は次のコードを書いたボディDOM要素を取得すると思ったし、それの子としてパラを追加します。

<html> 
    <head> 
     <script> 
      var body = document.getElementsByTagName('body')[0]; 
      var para = document.createElement('p'); 

      body.appendChild(para); 
     </script> 
    </head> 
<body> 
</body> 
</html>

と私は捕捉されない例外TypeErrorを得た：：以下は、レンダリングされた変数の体は値undefinedを持っていることを私に言っている未定義の「は、appendChild」、プロパティを読み取ることができませんが、なぜ彼らの何body要素は応じませんJSに？ DOM要素の基本とは何か、レンダリング時にどのように作成されるのか、これの背後にある基本を理解する必要があります。

出典

2017-03-19 Arpit Goyal

：

はこれを試してみてください。スクリプトをあなたの体の最後に置いてみてください。または、DOMの準備が整ったときにのみスクリプトを実行するためのチェックを行います。 – rasmeister

ありがとうございました。 :)それは遅れて動作します。 –

これは間違いありませんが、長い時間をかけない限り、予測できません。読み込み時間は異なります。私は通常、jQueryの.ready（）やdomReady（jQueryを使用していない場合）のようなマイクロライブラリを使用します。 – rasmeister

ボディにアクセスするにはdocument.bodyがありますが、bodyタグが表示される前にコードが実行されていることが主な問題です。 JavascriptはそのようにCSSのように実行されません。体が存在する前に、あなたはあなたのスクリプトを実行している

<html> 
 
    <head> 
 
     
 
    </head> 
 
<body> 
 
    
 
    <script> 
 
     var body = document.body; 
 
     var para = document.createElement('p'); 
 
     para.textContent = "Hello"; 
 
     body.appendChild(para); 
 
    </script> 
 
</body> 
 
</html>

出典

2017-03-19 20:47:36 Kokod

あなたはここにタグを追加することでdom要素を定義しています。私は純粋にjavascriptを扱いたいと思っていました。基本的にスクリプトの実行にタイムディレイを追加すると、DOM要素が生成されますか？ http://stackoverflow.com/questions/8010932/how-can-i-add-a-body-element-to-an-empty-dom-document（Antoineの回答とその2番目のコメント） –

時間の遅れ、それはハッキーだろう、なぜスクリプトをウィンドウのonloadイベントにバインドしないのですか？または、コードを関数にラップし、その関数を本体のonload属性で呼び出します。 –

私はそのようなことは一度もしていません。私は時間の遅れが何も変わらないとは思わない。何も書かれていないhtmlを書くには、ドキュメントを使うことができます。 – Kokod

単純なcreateElementコマンドがJSで動作し、HTML DOMに要素を作成しないのはなぜですか？

答えて

関連する問題