jqueryの要素を動的に作成する方法の紹介と応用

jqueryの要素を動的に作成する方法の紹介と応用_jquery

WBOY

リリース： 2016-05-16 17:35:58

オリジナル

843 人が閲覧しました

一般に、要素を動的に作成するには 2 つの方法があります
1. Dom HTML

var select = document.createElement("select"); 
select.options[0] = new Option("Add-in1", "value1"); [1] = 新しいオプション("add-in2", "value2"); 
select.size = "2" 

; > 
 ドキュメントの createElement メソッドで作成し、appendChild メソッドで指定したオブジェクトに追加します

2. JQuery 関数で作成します

$("

")
append、appendto、prepend、prependto などのメソッドで指定されたオブジェクトに追加します。詳細については、

http を確認してください。 ://www.jb51.net/article/35845.htm

3. ページが読み込まれた後に作成を実行するのが最適です。を使用できます。 window.onload ですが、新しい要素を追加するとき、残念なことに、ブラウザは DOM ツリーが構築された後だけでなく、すべての画像やその他の外部リソースが完全にロードされてブラウザウィンドウに表示された後も window.onload 関数を実行します。特定の画像またはその他のリソースの読み込みに時間がかかる場合は、不完全なページがユーザーに表示され、画像が読み込まれる前でも動的に追加された要素に依存するスクリプトが実行され、スクリプトエラーが発生します。解決策は、DOM が解析されるのを待ってから、外部リソースがロードされる前に画像を追加して関数を実行することです。

コードをコピーします

コードは次のとおりです。 $(document).ready( function() { testDiv.innerHTML = "< div style="border:solid 1px #FF0000">動的に作成された $(document) を使用します。ready(function) メソッド

"; } );

または単純なものを使用します構文:

コードをコピー

コードは次のとおりです: //jQuery は $( function) メソッド $( function() { testDiv.innerHTML = "

$(function) メソッドを使用

"; }

);

関数をラップするには $() を使用します。また、従来の window.onload を使用する場合は、
DOM を変更する関数を呼び出すには、このメソッドを使用してください。また、document.createElement と innerHTML の違いにも注意してください。可能であれば、document.createElement と $(" ") オブジェクトを作成します。