JQuery 如何ul动态添加li标签

首先在html页面中找到相应的ul标签对。
如下图：

<ul id="ulPlayPist">
    <li class="li_style">
        <div id="divItem1" class="div_item_v_style">
            <img id="img_item_1" src="../img/Icon_Movie.png" class="img_v_style"/>
            <input id="listItem_1" type="button" value="暂无" class="btn_list_item_v_style" onclick="Item_Click(1);"/>
        </div>
    </li>
</ul>

上面是一个html文件内ul标签的一个范例，并且li标签内含有div 等子标签。这个就不多说了，如果不懂建议先学习一下html基础。

二、需要在js函数内找到ul标签控件。
要获取ul对象可以通过id来进行查找。不过jQuery提供了一些简单的方法。
如下图：

//通过id=lPlayPist查找ul标签控件
$('#ulPlayPist').append("");

上面代码已经包含查找一阶添加。

三、动态添加。
组织需要添加标签String。如下

var li_str = '<li class="li_style">';
        li_str += '<div id="divItem'+(i+1).toString()+'" class="div_item_v_style">';
        li_str += '<img id="img_item_' + (i + 1).toString() + '" src="../img/Icon_Movie.png" class="img_v_style"/>';
        li_str += '<input id="listItem_' + (i + 1).toString() + '" type="button" value="' + dict_data["List"][i] + '" class="btn_list_item_v_style" οnclick="Item_Click(' + (i + 1).toString() + ');"/>';
        li_str += '</div></li>';

然后通过append这个语句，添加进去。

//添加数据到UL
function AddListToUl(dict_data) {
    var list_count = parseInt(dict_data["Count"]);
    $("#ulPlayPist").find("li").remove();
    for (var i = 0; i < list_count; i++) {
        var li_str = '<li class="li_style">';
        li_str += '<div id="divItem'+(i+1).toString()+'" class="div_item_v_style">';
        li_str += '<img id="img_item_' + (i + 1).toString() + '" src="../img/Icon_Movie.png" class="img_v_style"/>';
        li_str += '<input id="listItem_' + (i + 1).toString() + '" type="button" value="' + dict_data["List"][i] + '" class="btn_list_item_v_style" οnclick="Item_Click(' + (i + 1).toString() + ');"/>';
        li_str += '</div></li>';
        $('#ulPlayPist').append(li_str);
    }
}

以上就是基本代码。

出来的效果就这样（从浏览器调试看到的）
添加前：

动态添加后：

由于使用ajax减少界面刷新，实现动态实时加载数据。最后希望对大家有帮助。