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).

我相信这种传统方法有几个优点：

  • 即使您不是 100% 熟悉 jQuery API，发生的事情也很简单。
  • 它是本机的，因此它可能更快，因为它不必调用任何解析器。
  • 每个元素都是先定义的，关系是后定义的，所以我觉得比较清楚。

如果您发现它太长，而且更普遍 - 应该将这种代码提取到一个方法中

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 回答