如何使用JQuery将LI作为最后一个元素附加到UL

我正在用jQuery创建并填充一个列表，并希望动态添加

li

元素

我试过以下方法，但对我不起作用。相反，浏览器崩溃了。有人能帮忙吗

$(document).ready(function() {
$(".tophundredwatchlist").hide();

$(".addtophundredwatchlist").click(function() {
        $.ajax({
            type : "GET",
            url : "/watchlisttophundred/",
            success : function(data){
                generateList(data);
            }
        });
        $(this).next().toggle();
        return false;
    });

//this section draws the list

function generateList(data)
{
    var raw_tag = "<ul id='listwatchlist' class='listwatchlist'>";
    var add_new = "Add New"
    var json_array = data.json_array;
    for (var json_count = 0; json_count < json_array.length; json_count++)
    {
        var raw_string = "<li id='watchlistitem' class='watchlistitem'>" + json_array[json_count].watch_list_name + "</li>"
        raw_tag = raw_tag + raw_string
    }
    raw_tag =  raw_tag + "<div id='addnew' class='addnew'>" + add_new + "</div>"
    raw_tag =  raw_tag + "<div id='newtext' class='newtext'></div>"
    raw_tag = raw_tag + "</ul>"
    $(".listwatchlist").html(raw_tag)
}

//when i try to add the new li like this my browser crashes
$('.newwatchlisttext').live("keypress",function(event) {
    if(event.which == '13'){
        var watch_list_name = $(this).val();
        /**********************************************************/
        $.ajax({
            type : "GET",
            url : "/addwatchlistfromtophundredajaxhandler/",
            data : "watch_list_name=" + watch_list_name,
            success : function(msg){
                //$("listwatchlist ul").append('<li>' + data.watch_list_name + '</li>');
            }
        });
        /**********************************************************/
        $(".addnew").show()
        $(".newtext").hide()

        }
});

$（文档）.ready（函数（）{
$（“.tophundredwatchlist”）.hide（）；
$（“.AddTopHundWatchList”）。单击（函数（）{
$.ajax({
键入：“获取”，
url:“/WatchListTopHund/”，
成功：功能（数据）{
生成列表（数据）；
}
});
$（this.next（）.toggle（）；
返回false；
});
//本节将绘制列表
函数生成列表（数据）
{
var raw_tag=“
”；
var add_new=“add new”
var json_array=data.json_array；
for（var json_count=0；json_count”+json_数组[json_计数]。监视列表名称+”“
原始标记=原始标记+原始字符串
}
原始标签=原始标签+“”+添加新标签+“”
原始标签=原始标签+“”
原始标签=原始标签+“
”
$（“.listwatchlist”）.html（原始标记）
}
//当我尝试像这样添加新的li时，我的浏览器崩溃了
$（'.newwatchlisttext'）.live（“按键”，函数（事件）{
如果（event.which=='13'）{
var watch_list_name=$（this.val（）；
/**********************************************************/
$.ajax({
键入：“获取”，
url:“/addwatchlistfromtophundredajaxhandler/”，
数据：“监视列表名称=”+监视列表名称，
成功：功能（msg）{
//$（“listwatchlist ul”）.append（“
”+data.watch_list_name+”
）；
}
});
/**********************************************************/
$（“.addnew”）.show（）
$（“.newtext”）.hide（）
}
});
正如JohnP所说，您可能遇到的主要问题是试图在
ul
中嵌套div

但是这里有一种创建dom元素的方法，该方法使用jQuery的内置功能，可能不太容易出错

var raw_tag = $("<ul id='listwatchlist' class='listwatchlist' />");
var add_new = "Add New"
var json_array = data.json_array;
for (var json_count = 0; json_count < json_array.length; json_count++)
{
    raw_tag.append(
        $("<li id='watchlistitem' class='watchlistitem' />")
                    .text(json_array[json_count].watch_list_name));
}
//as noted by JohnP you can't really put div's inside a UL, so you'll need to change that
$(".listwatchlist").html(raw_tag)

var raw_tag=$（“
”）；
var add_new=“add new”
var json_array=data.json_array；
for（var json_count=0；json_count”）
.text（json_数组[json_计数].watch_列表_名称））；
}
//正如JohnP所指出的，你不能把div放在UL里面，所以你需要改变它
$（“.listwatchlist”）.html（原始标记）

此外，请确保您为新的
ul
，
listwatchlist
提供的id在整个页面中是唯一的。您绝对不能有多个元素具有相同的id。
您的选择器错误。您应该替换此行：

$("listwatchlist ul").append('<li>' + data.watch_list_name + '</li>');

$（“listwatchlist ul”）.append（“
”+data.watch_list_name+”
）；

与：

$（“ul#listwatchlist”）.append（“
”+data.watch_list_name+”
）；

哦，还有另一个答案指出的在
ul
中嵌套
div
。
您将div嵌套在ul中。另外，在将字符串放入DOM之前尝试输出字符串。使用
$（“
”）
的jQuery语法创建元素将更容易管理。
$("ul#listwatchlist").append('<li>' + data.watch_list_name + '</li>');