ホームページ  >  記事  >  ウェブフロントエンド  >  jquery_jquery に基づいた DOM 要素の動的作成に関する問題

jquery_jquery に基づいた DOM 要素の動的作成に関する問題

WBOY
WBOYオリジナル
2016-05-16 18:13:34997ブラウズ
コードをコピー コードは次のとおりです。



それを知っている人はどれくらいいるでしょうか?これは間違ったアプローチです。エラーの理由:
(1) IE6 では、ネットワークが遅くなったり、ページのコンテンツが大きすぎると、ページの構造が変更されます。 " というエラーが発生します。つまり、" ページの読み込み中にページの DOM モデルを変更しないでください。
(2) 変更された HTML コンテンツを使用して要素を追加することは、実際の作業では DOM 規格に準拠しません。また、このメソッドを使用してコンテンツを変更した後、一部のブラウザでは表示エンジンが異なるため、追加された要素がブラウザにすぐに表示されないことに遭遇しましたが、Dom の CreateElement を使用してオブジェクトを作成すると、それが表示されます。ほとんどすべてのブラウザで実行できますが、jQuery では、受信したものが完全な HTML 文字列であり、innerHTML 関数の使用が完全に否定されるわけではありません。
HTML DOM を使用した作成について この記事では、要素の詳細は紹介しません。最初の正しい方法は次のとおりです。
コードをコピーします コードは次のとおりです:

//Dom 標準を使用して要素を作成します
var select = document.createElement(" select");
select.options[0] = 新しいオプション("アドイン 1", " 値 1");
select.options[1] = 新しいオプション("アドイン 2", "値 2 ");
select.size = "2";
var object = testDiv.appendChild(select );

document.createElement メソッドを使用して Dom 要素を作成できます。
2 番目の方法: HTML 文字列が属性のない要素である場合、要素の作成に Document.createElement が内部的に使用されます。たとえば、

//jQuery は内部で document.createElement を使用して要素を作成します:


$("") css("border","solid 1px #FF0000").html("Dynamicly created div" ).appendTo(testDiv);
それ以外の場合は、innerHTML メソッドを使用して要素を作成します:

//jQuery 内部使用の innerHTML 作成要素:

$("動的に作成された div")。 appendTo(testDiv)
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。