Что такое правильный способ создания сложных элементов?

Question

Каков наилучший способ создать следующий элемент div в jQuery?

<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 ?? " 
    }); 

Я понимаю, что я должен добавить элемент отдельно после того, как его создать, но я не могу получить право создания.

Answer 1

Если я могу предложить традиционный подход, я бы что-то вроде этого:

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

Если вы хотите, чтобы элемент JQuery из элемента dom, вы можете сделать $(group).

Я считаю, что этот традиционный подход имеет ряд преимуществ:

• Это очень просто, что происходит, даже если вы не на 100%, знакомый с API JQuery.
• Это родной язык, поэтому он скорее всего быстрее, так как ему не нужно вызывать какой-либо парсер.
• Каждый элемент определяется первым, и отношения определяются позже, поэтому я думаю, что это яснее.

Если вы обнаружили, что слишком долго, и в более общем смысле - это своего рода код должен быть извлечены методом

function buildButtonGroup(){ 
    // rest of the code here 
    return group; 
} 

Answer 2

я могу выбрать что-то вроде

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

Для более сложной структуры йот я могу выбрать шаблон, как underscore или jsrender

Answer 3

Это должно работать, но вы также можете просто построить 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>');