什麼是創建複雜元素的正確方法？

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

我意識到我必須在創建它之後單獨附加元素，但我無法獲得創建權。

來源

2013-09-01 Simpler

檢查了這一點。 http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery –

您可能需要單獨創建它們並按正確的順序追加它們 –

如果它變得過於複雜，請使用模板庫並將HTML /標記作爲模板包含在單獨的文件中。 – mash

如果我可以建議一個傳統的做法，我會做這樣的事情出dom元素，你可以做$(group)。

我認爲，這種傳統的方法有幾個優點：

這是非常簡單的所發生的事情，即使你不是100％熟悉jQuery的API。
它是原生的，所以它可能更快，因爲它不需要調用任何解析器。
每個元素都是首先定義的，關係在後面定義，所以我認爲它更清晰。

如果發現時間過長，一般多 - 這種代碼應提取的方法

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

來源

2013-09-01 01:50:50

如果你關心，[其他解決方案速度減慢90％]（http://jsperf.com/create-native-or-jquery） - 但它本身不應該是一個重要的考慮因素。 –

我可能會選擇像

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-01 01:45:57

我還沒有驗證過這一點，但我很肯定你必須引用''class''，因爲它是[保留字]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words）。 –

@DavidThomas，這個方法與'$ div.append（「」）相比非常慢：'明智地選擇。 – Starx

@Starx：沒關係，但你爲什麼告訴我..？ –

模板，這應該工作，但是你也可以只構建一個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);

這也是可以接受的：如果你想一個jQuery元素

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

：

var btnGroup = $('<div class="btn-group"> <button class="btn dropdown-toggle" title="Manage" data-toggle="dropdown"> <span class="caret"></span> </button> </div>');

來源

2013-09-01 01:47:08 OneOfOne

什麼是創建複雜元素的正確方法？

回答

相關問題