Javascript/jQueryは、ページが読み込まれる前にUL要素にhtmlを追加します。

Question

私は、Webページにユーザーにメッセージを設定するタイトルバーを持っています。タイトルはjavascriptによって動的に作成されます。 ULにはLIが含まれていないページに目に見える遅れなくコンテンツが表示され、突然表示されます。これは可能ですか？どんなjavascriptのDOM読み込みイベントを使用したいですか？

Answer 1

ドキュメントがロードされるのを待つ必要があるのは、DOM内にその要素が存在するように選択できるようにすることです（最近はdocument.ready）。変更が必要な要素がページ内にすでに存在する場合は、待つ必要はありません。

次の例しません仕事

<script> 
    var foo = document.getElementById('foo'); 
    ...do more stuff with foo... 
</script> 
<div id="foo"></div> 

このスクリプトは

次の例を実行したときにDOMがdiv#fooがロードされていないので、文句を言わない仕事ます仕事

<div id="foo"></div> 
<script> 
    var foo = document.getElementById('foo'); 
    ...do more stuff with foo... 
</script> 

div#foo haすでに解析されており、要素が存在しています。

JavaScriptを使用してブラウザ間でノードを作成する特別なイベントはありません。しかし、の後にスクリプトを配置することができる場合は、要素が作成された後、瞬時に要素を操作することができます。

Answer 2

一般的に言って、Javascriptでは、何かがスムーズに表示されたいときは、何かが滑らかではないにもかかわらず、準備ができるまですべてを隠すだけです。言い換えれば

、あなたがない場合：

<ul style="display:none"></ul> 

その後、ULを示し、あなたが欲しい効果を持っている必要があり、その後、のLIを追加するために、いくつかのJavascriptを追加します。 LIを追加するJSは、onReadyまたはonLoadハンドラの内部にロジックを置く前に、ULの後ろのどこにでも置くことができます。

<ul id="myList" style="display:none"></ul> 
<script> 
for (var i = 0; i < 5; i++) { 
    $("#myList").append("<li>" + i + "</li>"); 
} 
$("#myList").show(); 
</script> 

すなわち：

は、ここでは簡単jQueryの例です。 ULの非表示を開始し、それに物を追加して、それを表示します。希望が役立ちます。