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

时间:2015-01-30 16:52:22

标签: javascript jquery json dom

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

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

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

Q1。我应该在这里使用.clone()吗?

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

Q2。将列表元素应用于列表时我做错了什么?

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

1 个答案:

答案 0 :(得分:1)

您将html放在css窗格中:D

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

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