次の 2 つの方法のうち、正しい方法はどれですか。
$('<div>')
また
$('<div />')
どちらも機能しているようです。どちらかの方法が正しいか、それとも両方とも常に機能するか?
次の 2 つの方法のうち、正しい方法はどれですか。
$('<div>')
また
$('<div />')
どちらも機能しているようです。どちらかの方法が正しいか、それとも両方とも常に機能するか?
これらは jQuery で同じ結果を生成します。
ドキュメントから:
文字列がパラメータとして $() に渡されると、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>');
それらは同じ結果を生成するように見えますが、用途に基づいて、それらは同じ結果を生成しない可能性があります。例えば:
jQueryが解析している間$('<div> <p>')
、<p>
タグはタグの子に<div>
なるため、結果は次のようになります。<div> <p></p> </div>
また、jQueryが解析している間$('<div/> <p/>')
、<p/>
タグはタグの兄弟に<div/>
なるため、結果は次のようになります。<div></div> <p></p>
どちらのバリアントでも同じ結果が得られますが、これは
$('<div />', {id:"myID",class:"mycssClass class2 clazzz",some-attribute: "value"});
よりも優れており、より読みやすい
$('<div id="myId" class="mycssClass class2 clazzz" some-attribute="value"></div>');