如何将动态创建的元素添加到我的动态创建列表中？

Question

我在将动态创建的列表项添加到动态创建的列表时遇到了一些问题。我创建了一个函数，它返回动态创建的ul 和li。

从这里我创建了两个列表：

var el          = Part.mainSearchResult();
var brandList   = $(el.ul).clone(true);
var storeList   = $(el.ul).clone(true);

第一季度。我应该在这里使用.clone() 吗？

然后我尝试将列表元素添加到列表中，然后输出。但我没那么成功。

第二季度。将列表元素应用于列表时我做错了什么？

You can see my fiddle here.

var Part = {
    mainSearchResult : function(){
        var el = {}
        el.ul = $("<ul />", {
            'data-role': "listview",
            'data-inset' : "true"
        });

        el.brand = $("<li />", { 'data-role': "listview", 'data-inset' : "true"})
            .append($("<a />", { 'href': "#"}));

        el.store = $('<li/>', {'data-role': "listview", 'data-inset' : "true"}).append(
            $('<a/>', {'href': '#'}).append(
                $('<div/>', {'class': "name"})
            ).append(
                $('<div/>', {'class': "location"})
            )
        );
        return el;
    }
};

function test(response) {
    var el          = Part.mainSearchResult();
    var brandList   = $(el.ul).clone(true);
    var storeList   = $(el.ul).clone(true);

    $(response.brands).each(function(){
        var brand = $(this)[0];    
        var url = 'http://www.jsfiddle.com/' + brand.name + '/' + brand.id;
        var li = el.brand[0];  // Maybe I should clone this?
        $(li).find('a').prop('href',url);
        $(li).find('a').text(brand.name);
        brandList.append(li);
    });

    $('.result').append(brandList);    
    console.log(brandList);
}

Answer 1

您将 html 放在 css 窗格中：D

<div class="result"></div>

http://jsfiddle.net/etsg4vvw/4/