250

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

また：

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

または：

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

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

4

8 に答える 8

371

最初のオプションは、より柔軟性があります。

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

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

もう1つの良い習慣は、jQuery変数の前に$：を付けることです。jQueryで変数とともに
$を使用することの背後にある特定の理由はありますか？

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

于 2012-05-16T13:22:11.777 に答える
82

個人的には、コードがパフォーマンスよりも読みやすく編集可能であることが重要だと思います。どちらが見やすく、上記の要因から選択する必要があります。次のように記述できます。

$('#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 のトリック、メモ、およびベスト プラクティスに従ってください

于 2012-05-16T13:43:35.250 に答える
27

もっと表現力豊かに、

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

参考：ドキュメント

于 2013-07-08T07:54:21.383 に答える
0

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

于 2012-05-16T13:23:24.883 に答える
0

#box空の場合は何もありませんが、そうでない場合は、これらは非常に異なることを行います。前者はdiv、の最後の子ノードとしてを追加します#box。後者は、の内容を#box単一の空divのテキストとすべてに完全に置き換えます。

于 2012-05-16T13:25:11.227 に答える