javascript - Jqueryで作成したhtml要素を変数に格納する

Question

html 本文に 2 つの div 要素を追加しようとしています。まず、一意の ID を割り当てて 2 つの変数に格納する div 要素を作成します。

var a = $('div').attr('id', 'container');         
var b= $('div').attr('id', 'selectable');     

 $(a).appendTo('body');
 $(b).appendTo('body);

問題は、それらを本文に追加するときです。実際に本文に追加されている div 要素は 1 つだけです。さらに調べてみると、変数 b のコンテンツが変数 a にコピーされていることに気付きました。そのため、変数 a と b はどちらも ID を選択できる同じ div を参照しています。

HTML 本文に追加する 2 つの一意の div 要素を作成するにはどうすればよいですか?

score 9 · Accepted Answer

divを作成するのではなく、divを選択しています。

var a = $('div').attr('id', 'container');
var b = $('div').attr('id', 'selectable');

次のようにする必要があります。

var a = $('<div/>').attr('id', 'container');
var b = $('<div/>').attr('id', 'selectable');

score 4 · Accepted Answer

これは、すべての div 要素の dom を検索します。

$('div');

したがって、次のコードは 'selectable' の id をすべての div 要素に適用しています。

var a = $('div').attr('id', 'container');         
var b = $('div').attr('id', 'selectable');

jQuery で要素を作成するには、'<' で始まる文字列が必要です。必要な結果を得るには、おそらく次のことを行う必要があります。

var a = $('<div/>').attr('id', 'container');
a.appendTo('body');

次のこともできます。

var a = $('<div id="container" />').appendTo('body');

3 に答える 3