jqueryに基づくDOM要素の動的作成に関する問題
1562 ワード
<br>document.getElementById("testDiv").innerHTML =" div";
<br>
しかも使うのはやはり楽しくて疲れないべきで、しかしどれだけの人がこれが间违ったやり方であることを知っています!エラーの原因:
(1)ページロード時にページの構成を変更する.IE 6では、ネットワークが遅いなったり、ページの内容が大きいなったりすると「操作を終了する」というエラーが発生する.すなわち、「ページのロード時にページのDomモデルを変更することは決してない」ということである.
(2)修正HTMLコンテンツを用いて要素を追加する、Dom規格に適合しない.実際の作業でもこのような方法で内容を修正すると、ブラウザによっては表示エンジンが異なるため、追加要素をすぐに表示できないブラウザもある.しかし、DomのCreateElementを使用してオブジェクトを作成する場合は、すべてのブラウザでほとんど可能です.ただしjQueryでは入力が完全なHTML文字列である場合、内部でもinnerHTMLが用いられる.だからinnerHTML関数の使用を完全に否定するわけではない.だから今からこのような古い知識を捨てて、以下に紹介する正しい方法でプログラミングしてください.
HTML DOMを使用した要素の作成については、ここでは詳しく説明しません.次の簡単な例を挙げます.最初の正しい方法は次のとおりです.
// Dom
var select = document.createElement("select");
select.options[0] = new Option(" 1", "value1");
select.options[1] = new Option(" 2", "value2");
select.size = "2";
var object = testDiv.appendChild(select);
documentを使用する.CreateElementメソッドDom要素を作成し、appendChildメソッドで指定したオブジェクトに追加できます.
2つ目の方法:Jqueryの使用
HTML文字列が属性のない要素である場合、内部ではdocumentが使用される.createElementは、次のような要素を作成します.
//jQuery内部でdocumentを使用する.CreateElement作成要素:
$("").css("border","solid 1px #FF0000").html(「動的に作成されたdiv」).appendTo(testDiv);
それ以外の場合はinnerHTMLメソッドを使用して要素を作成します.
//jQuery内部innerHTMLを使用して要素を作成:
$(「動的に作成されたdiv」).appendTo(testDiv)