jQueryで新しい要素を作成するための推奨される方法

227

を<div>使用して作成する方法は2つありますjQuery。

どちらか：

var div = $("<div></div>");
$("#box").append(div);

または：

$("#box").append("<div></div>");

再利用性以外の2番目の方法を使用する場合の欠点は何ですか？

— アシュウィン
ソース

8

それは再利用性の問題です。あなたの電話。

— ロコC.ブルジャン

再利用可能性による@gdoronつまり、変数内に要素がある場合、例のように、必要な場所でそのvarを呼び出すことができます。

— ロコC.ブルジャン

2

なぜ.html、.append2番目のケースではないのですか？

— エンジニア、

@エンジニア-申し訳ありませんが、ここでは間違いでした。修正しました。

— アシュウィン

後者の方法は実行速度の点でより速いと思いましたが、最初の方法は（10％〜40％）速いようです：jsperf.com/jquery-append-string-vs-append-jquery-reference

— Fabrizio

339

最初のオプションでは、柔軟性が向上します。

var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);

もちろん.html('*')、コンテンツ.append('*')はオーバーライドされませんが、オーバーライドされますが、これはあなたの質問ではなかったと思います。

もう一つの良い練習であなたのjQuery変数を前置さ$：
jQueryの変数と$を使用しての背後にある任意の特定の理由があります

"class"プロパティ名を引用符で囲むと、柔軟性の低いブラウザとの互換性が高まります。

— gdoronはモニカをサポートしています
ソース

10

また、jQueryコレクション名を「$」で始めるのもよいと思います。あなたがやったことは必要ないことを注意してください$div：$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");

— Explosion Pills

それらのドル記号は必要ですか、それともタイプミスですか？$div。その構文は以前に見たことがありませんが、Jqueryは初めてです。

— felwithe 2015

私は常に変数$がjqueryオブジェクト、$ _がjQueryコレクションの場合、_varがカウンターの場合に使用します。通常の変数の変数。

— ケーシー

1

要素を作成するこの方法のドキュメントはどこにありますか？$("<div>", {id: "foo", class: "a"});。他のオプションがあるかどうかを知りたい

— Saba Ahang

してください@gdoron、私の質問を見てみましょうstackoverflow.com/questions/35413044/...

— Vixed

74

個人的には、パフォーマンスよりもコードを読みやすく編集可能にすることが重要だと思います。どちらが見やすく、上記の要因で選択したものでなければなりません。あなたはそれを次のように書くことができます：

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

そしてあなたの最初の方法は：

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

しかし、読みやすさに関する限り、jQueryアプローチが私のお気に入りです。この役立つjQueryの秘訣、メモ、ベストプラクティスに従ってください

— ニランジャン・シン
ソース

新しいHTML要素の作成に関するjQueryリファレンスへのリンクをありがとう。そのためグーグルするのは難しい。

— ボブスタイン

次のようにしてください：stackoverflow.com/a/43719563/383904

— Roko C. Buljan

25

はるかに表現力豊かな方法、

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

リファレンス：ドキュメント

— ダルシャン
ソース

4

class（上記のドキュメントリンクを介して）ドキュメントによれば、引用符で囲む必要があります。「名前「クラス」はJavaScriptの予約語であるため、オブジェクト内で引用する必要があります。「className」はDOMプロパティを参照するため使用できません。、属性ではありません。」

— Isaac Gregson

5

jQuery公式ドキュメントによると

HTML要素を作成する$("<div/>")か$("<div></div>")、推奨されます。

次に、あなたがいずれかを使用することができappendTo、append、before、afterおよびなど、。新しい要素をDOMに挿入します。

PS：jQueryバージョン1.11.x

— アラン・ドン
ソース

2

3.4のドキュメントによると、attr()メソッドで属性を使用することをお勧めします。

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

— アヌラーダ・ムダリゲ
ソース

見積もりを追加しました。あなたが入れない場合はclass、引用符で、これは黙って失敗し、狂気になることがあります。

— John Henckel

0

jQueryを使用して要素を実際に構築する最初のオプションをお勧めします。2番目のアプローチは、要素のinnerHTMLプロパティを文字列に設定するだけです。これはたまたまHTMLであり、エラーが発生しやすく、柔軟性が低くなります。

— jbabey
ソース

1

@ 2番目の方法を使用すると、変更しているコンテナの他のすべての子を誤って一掃してしまう可能性があります。jsfiddle.net

— jbabey

0

#box空の場合は何もありませんが、空でない場合は非常に異なる処理を行います。前者はa divをの最後の子ノードとして追加します#box。後者は、の内容#boxを1つの空のdiv、テキスト、およびすべてで完全に置き換えます。

— 爆発の丸薬
ソース

ああ..ここではアペンドを使用しないことを意味します;）

— アシュウィン

0

次の方法でdiv要素を作成することもできます。

var my_div = document.createElement('div');

クラスを追加

my_div.classList.add('col-10');

また、実行することができますappend()し、appendChild()

— nabila_ahmed
ソース