jquery動的作成要素

2727 ワード

一般的に動的に要素を作成するには、2つの方法があります.
1、Dom HTml
   
  
var select = document.createElement("select");
     select.options[0] = 
新Option(「項目1をロード」,「value 1」)
     select.options[1] = 
新Option(「ロード項目2」,「value 2」);
     select.size = "2";
     testDiv.appendChild(select);
     });
documentのcreateElementメソッドで作成し、appendChildメソッドで指定したオブジェクトに追加します.
2、JQuery関数の作成
$("
動的に作成されたdiv
)append,appendto,prepend,prependtoなどの方法で指定したオブジェクトに追加します.
    http://www.cnblogs.com/shuang121/archive/2011/12/16/2290189.html
3、ページをロードするときは、ページをロードした後に作成することが望ましい
Windowsを使用できます.onloadですが、新しい要素を追加していますが、残念なことにブラウザがwindowを実行します.onload関数は、DOMツリーを構築する後だけでなく、すべての画像や他の外部リソースの完全なロード、ブラウザウィンドウの表示が完了した後でもある.したがって、あるピクチャまたは他のリソースが長い間ロードされると、訪問者は、ピクチャのロード前に動的に追加する要素に依存するスクリプトを実行してスクリプトエラーを引き起こす不完全なページを見ることができる.
解決策はDOMが解析された後、画像と外部資源のロード前に私たちの関数を実行することである.jQueryでこの実装を実行可能にする
 
$(document).ready(function(){testDiv.innerHTML="
動的に作成された$(document).ready(function)メソッド
"});13;







.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
または、簡単な構文を使用します.
//jQuery   $(function)  
$(
        function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">  $(function)  </div>"; }
);

私たちの関数を$()で包装すればいいです.従来のwindowを使用する場合、1つのページに複数の関数をバインドすることができます.onloadでは1つの関数しか呼び出せません.
DOMの関数を修正してこのメソッドを使用して呼び出してください.またdocumentにも注意してください.createElementとinnerHTMLの違い.できればdocumentを使ってください.createElementと$(
)の形式でオブジェクトを作成します.