What is proper way to create complex elements?

What is proper way to create complex elements?

What is the best way to create the following div element in jQuery?
<div class="btn-group">
<button class="btn dropdown-toggle" title="Manage" data-toggle="dropdown">
<span class="caret"></span>
</button>
</div>
I've tried multiple formats, but I can't seem to get it right.
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 ?? "
});
I realize that I have to append the element separately after I create it,
but I can't get the creation right.