5

jQuery で次の div 要素を作成する最良の方法は何ですか?

<div class="btn-group">
  <button class="btn dropdown-toggle" title="Manage" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
</div>

複数のフォーマットを試しましたが、うまくいきません。

  var itemsButtonsDiv = $('<div><button><span></span></button></div>')
    .addClass("btn-group")
    .attr({
      title: "Manage",
      "data-toggle": "dropdown"
    })
    .find("button")
      .addClass("btn dropdown-toggle")
      .find("span")
        .addClass("caret")
  ;


  var itemsButtonsDiv = $("<div><button><span></span></button></div>", {
    "class": "btn-group",
    html: "  ??  Does everything else go here as one long text string  ??  "
  });

作成後に要素を個別に追加する必要があることに気付きましたが、正しく作成できません。

4

3 に答える 3

5

従来のアプローチを提案する場合は、次のようにします。

var group = document.createElement("div");
group.className = "btn-group";

var btn = document.createElement("button");
btn.className = "btn dropdown-toggle";
btn.title = "Manage";
btn.setAttribute("data-toggle","dropdown");

var caret = document.createElement("span");
caret.className = "caret";

btn.appendChild(caret);
group.appendChild(btn);

dom 要素から jQuery 要素を作成する場合は、次のようにします$(group)。

この従来のアプローチにはいくつかの利点があると思います。

  • jQuery API に 100% 精通していなくても、何が起こっているかは非常に簡単です。
  • ネイティブなので、パーサーを呼び出す必要がないため、おそらく高速です。
  • すべての要素が最初に定義され、関係が後で定義されるので、より明確になると思います。

長すぎる場合、より一般的には、この種のコードはメソッドに抽出する必要があります

function buildButtonGroup(){
    // rest of the code here
    return group;
}
于 2013-09-01T01:50:50.703 に答える
0

私は次のようなものを選ぶかもしれません

var $div = $('<div />', {
    class: 'btn-group'
});
var $btn = $('<button />', {
    class: 'btn dropdown-toggle'
}).appendTo($btn)
$('<span />', {
    class: 'caret'
}).appendTo($div)

より複雑な dom 構造の場合、underscoreまたはのようなテンプレートを選択できますjsrender

于 2013-09-01T01:45:57.123 に答える
0

これは機能するはずですが、html 文字列を作成して$(html);;で変換することもできます。

var btnGroup = $("<div/>", {"class": "btn-group"});

var btn = $('<button/>', {
      'class': 'btn dropdown-toggle',
      title: "Manage",
      "data-toggle": "dropdown"
    });
btn.append($('<span/>', {'class': 'caret'});
btnGroup.append(btn);

これも許容されます:

var btnGroup = $('<div class="btn-group"> <button class="btn dropdown-toggle" title="Manage" data-toggle="dropdown"> <span class="caret"></span> </button> </div>');
于 2013-09-01T01:47:08.430 に答える