web-dev-qa-db-ja.com

jQueryを使って新しい要素を作成するための好ましい方法

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

どちらか

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

または

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

再利用以外に2番目の方法を使用することの欠点は何ですか？

javascriptjqueryappendcreateelementjquery-append
214
Ashwin

最初のオプションはあなたにもっと柔軟性を与えます：

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

もちろん、.html('*')は内容を上書きしますが、.append('*')は上書きしませんが、これはあなたの質問ではないと思います。

もう1つの良い方法は、jQuery変数の先頭に$を付けることです。
jQueryで$を変数と一緒に使用することには、特別な理由がありますか？

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

319
gdoron

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

$('#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のトリック、メモ、そしてベストプラクティス

67
Niranjan Singh

もっと表現力豊かな方法、

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

参照： ドキュメント

22
Darshan

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

HTML要素を作成するには、$("<div/>")または$("<div></div>")が優先されます。

それからappendTo、append、before、afterなどを使うことができます。新しい要素をDOMに挿入します。

シモンズ：jQueryのバージョン1.11.x

5
Alan Dong

私は.html(content)を使って新しいアイディアを持っています

空の<div></div>を前の場所に置くことができます。このDIVのIDを忘れずに設定してください。

その後、$("#divId").html(content)を使用して空のDIVを新しいコンテンツに置き換えます。これが追加するDIVです。

2
Tianming Li

最初の選択肢は、jQueryを使って実際に要素を構築することをお勧めします。 2番目の方法では、要素のinnerHTMLプロパティを単純に文字列に設定します。これはたまたまHTMLであり、エラーが発生しやすく、柔軟性がありません。

0
jbabey

#boxが空の場合は何もありませんが、そうでない場合はまったく違います。前者は、#boxの最後の子ノードとしてdivを追加します。後者は、#boxの内容を単一の空のdiv、textおよびallに完全に置き換えます。

0
Explosion Pills

次のようにdiv要素を作成することも可能です。

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

クラスを追加

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

append()とappendChild()も実行できます

0
nabila_ahmed