Javascript 如何将类和元素（<；p>；）添加到附加的<；李>；在jQuery/JS中

我对jQuery、JS和AJAX相当陌生，所以请耐心听我说

我试图创建一个动态，该动态将根据数据库中的结果生成其内容。这是我想用jQuery/JS生成的HTML代码：

<li class="box">
            <img class="picture" src="images/HotPromo/tagPhoto1.png"/>
            <p class="name"><b>Name</b></p>
            <p class="address">Address</p>
        </li>

名称

地址

它是一个包含类和一些HTML元素的列表项

所以我试过这样的方法：

$.ajax({
            url: "http://localhost/jwmws/index.php/jwm/search/msmall/"+keyword, //This is the current doc
            type: "GET",
            error : function(jq, st, err) {
                alert(st + " : " + err);
            },
            success: function(result){
                if(result.length == 0)
                {
                    //temp
                    alert("not found");
                }
                else{
                    for(var i = 0; i < result.length; i++)
                    {
                        //generate <li>
                        $('#list').append('<li class="box">');
                        $('#list').append('<img class="picture" src="images/HotPromo/tagPhoto1.png"/>');
                        $('#list').append('<p class="name"><b>Name</b></p>');
                        $('#list').append('<p class="address">Address</p></li>');
                    }

                    var i=0;
                 //THIS PART IS ALREADY WORKING
                    $(".box").each(function(){
                            var name, address, picture = "";
                        if(i < result.length)
                        {
                            alert("generated");


                            name = result[i].name;
                            address = result[i].address;
                            picture = result[i].boxpicture;
                        }

                        $(this).find(".name").html(name);
                        $(this).find(".address").html(address);
                        $(this).find(".picture").attr("src", picture);
                        i++;
                    });
                }
            }
            });

$.ajax({
url:“http://localhost/jwmws/index.php/jwm/search/msmall/“+关键字，//这是当前单据
键入：“获取”，
错误：函数（jq、st、err）{
警报（st+“：”+错误）；
},
成功：功能（结果）{
如果（result.length==0）
{
//临时工
警报（“未找到”）；
}
否则{
对于（变量i=0；i
$（'#list'）。追加（'
）；
$（“#列表”）。追加（“”）；
$（“#list”）.append（“
name
”）；
$（“#列表”）.append（“
address
”）；
}
var i=0；
//这部分已经开始工作了
$（“.box”）。每个（函数（）{
变量名称、地址、图片=”；
如果（i<结果长度）
{
警报（“生成”）；
名称=结果[i]。名称；
地址=结果[i]。地址；
picture=结果[i].boxpicture；
}
$（this.find（“.name”）.html（name）；
$（this.find（“.address”）.html（address）；
$（this.find（“.picture”）.attr（“src”，picture）；
i++；
});
}
}
});

AJAX&CSS似乎没有阅读

class=“box”

我已经做了一些研究和试验，我可以做一些类似于

$（'#list'）的事情很容易。但是我不知道为什么我的代码不起作用

注意：我已经尝试手动编写上面的HTML，用于生成数据的AJAX已经开始工作了。所以现在唯一的问题似乎是追加

感谢您的帮助。谢谢：D
.append（）不能作为字符串连接操作使用，您需要创建一个dom结构并将其传递给.append（）调用

试一试

$（'#list'）。追加（'
name
address
）；

但是代码应该尽可能简单

$.ajax({
    url: "http://localhost/jwmws/index.php/jwm/search/msmall/"+keyword, //This is the current doc
    type: "GET",
    error : function(jq, st, err) {
        alert(st + " : " + err);
    },
    success: function(result){
        if (result.length == 0) {
            // temp
            alert("not found");
        } else {

            var $list = $('#list');
            $.each(result, function(idx, item) {
                $list.append('<li class="box box' + idx
                             + '"><img class="picture" src="'
                             + item.boxpicture
                             + '"/><p class="name">' + item.name
                             + '</p><p class="address">'
                             + item.address + '</p></li>');
            })
        }
    }
});

$.ajax({
url:“http://localhost/jwmws/index.php/jwm/search/msmall/“+关键字，//这是当前单据
键入：“获取”，
错误：函数（jq、st、err）{
警报（st+“：”+错误）；
},
成功：功能（结果）{
如果（result.length==0）{
//临时工
警报（“未找到”）；
}否则{
var$list=$（“#list”）；
$。每个（结果、函数（idx、项）{
$list.append（“
”+item.name
+“
”
+item.address+“
”）；
})
}
}
});
非常感谢您的帮助：D是的，现在可以工作了。我以后会接受你的回答，因为系统不允许我这样做。如果我想生成像“box1”、“box2”这样的内容，该如何处理？@BlazeTama更新后，它现在向
li
，
box
和
box0
，
box1
。。。etcAgain，非常感谢！你节省了我的时间：D
$.ajax({
    url: "http://localhost/jwmws/index.php/jwm/search/msmall/"+keyword, //This is the current doc
    type: "GET",
    error : function(jq, st, err) {
        alert(st + " : " + err);
    },
    success: function(result){
        if (result.length == 0) {
            // temp
            alert("not found");
        } else {

            var $list = $('#list');
            $.each(result, function(idx, item) {
                $list.append('<li class="box box' + idx
                             + '"><img class="picture" src="'
                             + item.boxpicture
                             + '"/><p class="name">' + item.name
                             + '</p><p class="address">'
                             + item.address + '</p></li>');
            })
        }
    }
});