javascript - jquery $('') 対 $('')

Question

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

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

$('<div>') 

また

$('<div />')

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

Answer 1

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

Answer 2

ドキュメントから：

文字列がパラメータとして $() に渡されると、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>');

Answer 3

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

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

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

Answer 4

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

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

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

$('<div id="myId" class="mycssClass class2 clazzz" some-attribute="value"></div>');