如何添加类和元素（ <p> ）附加到 <li> 在jQuery / JS中

Question

Im fairly new with jQuery, JS & AJAX so please bear with me.

I tried to create a dynamic that will generate its content based on the result in my DB. This is the HTML code i want to generate with jQuery/JS :

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

It a list item with a class and some HTML elements in it.

So i tried something like this :

$.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++;
                    });
                }
            }
            });

The AJAX & CSS seems dont read the class="box" .

I have done some research and trials, and i can do something like $('#list').append('<li><a href="#header">Back to top</a></li>'); easily. But i dont know why my code is not working.

Note : I have tried to manually code the HTML above, and the AJAX for generating data is already working. So it seems the only problem is the append now.

Any help is appreciated. Thanks :D

Answer 1

The .append() does not work as a string concatenate operation, you need to create a dom structure and pass it to the .append() call

Try

$('#list').append('<li class="box"><img class="picture" src="images/HotPromo/tagPhoto1.png"/><p class="name"><b>Name</b></p><p class="address">Address</p></li>');

But the code should be as simple as

$.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>');
            })
        }
    }
});