18

重複の可能性:
$('<element>') vs $('<element />') in jQuery

次の 2 つの方法のうち、正しい方法はどれですか。

$('<div>') 

また

$('<div />')

どちらも機能しているようです。どちらかの方法が正しいか、それとも両方とも常に機能するか?

4

4 に答える 4

12

これらは jQuery で同じ結果を生成します。

于 2012-05-01T18:49:24.183 に答える
11

ドキュメントから:

文字列がパラメータとして $() に渡されると、jQuery はその文字列が HTML のように見えるかどうか (つまり、<tag ... >文字列内のどこかにあるかどうか) を調べます。そうでない場合、上記で説明したように、文字列はセレクター式として解釈されます。ただし、文字列が HTML スニペットのように見える場合、jQuery は HTML で記述されているとおりに新しい DOM 要素を作成しようとします。次に、これらの要素を参照する jQuery オブジェクトが作成されて返されます。このオブジェクトに対して、通常の jQuery メソッドのいずれかを実行できます。

$('<p id="test">My <em>new</em> text</p>').appendTo('body'); 

上記の例のように、HTML が属性のない単一のタグよりも複雑な場合、要素の実際の作成はブラウザーの innerHTML メカニズムによって処理されます。ほとんどの場合、jQuery は新しい要素を作成し、要素の innerHTML プロパティを、渡された HTML スニペットに設定します。パラメータに などの単一のタグがある場合$('<img />') or $('<a></a>')、jQuery はネイティブ JavaScript の createElement() 関数を使用して要素を作成します。

クロスプラットフォームの互換性を確保するには、スニペットの形式が適切である必要があります。他の要素を含むことができるタグは、終了タグとペアにする必要があります:

$('<a href="http://jquery.com"></a>');

あるいは、jQuery では XML のようなタグ構文 (スラッシュの前にスペースがあってもなくても) を使用できます。

$('<a/>');

要素を含むことができないタグは、クイック クローズされている場合とされていない場合があります。

$('<img />');
$('<input>');
于 2012-05-01T18:54:31.213 に答える
1

それらは同じ結果を生成するように見えますが、用途に基づいて、それらは同じ結果を生成しない可能性があります。例えば:

jQueryが解析している間$('<div> <p>')<p>タグはタグの<div>なるため、結果は次のようになります。<div> <p></p> </div>

また、jQueryが解析している間$('<div/> <p/>')<p/>タグはタグの兄弟<div/>なるため、結果は次のようになります。<div></div> <p></p>

于 2012-05-01T19:22:33.177 に答える
0

どちらのバリアントでも同じ結果が得られますが、これは

$('<div />', {id:"myID",class:"mycssClass class2 clazzz",some-attribute: "value"});

よりも優れており、より読みやすい

$('<div id="myId" class="mycssClass class2 clazzz" some-attribute="value"></div>');
于 2012-05-01T18:56:18.743 に答える