使用jQuery优化在HTML中追加元素的方法

Question

What is the optimize way to append this element to my specific DIV Class using JQUERY. This will generate dynamic elements. I use .AppendTo then display dynamically the element inside <div class='parent-list-workorder'> .

Here's my code so far but it doesn't work:

$(document).ready(function(){

    var ListOfWorkOrders = [];

    $("#button").click(function(){

        //var _WOID = $('.list-workorder-id').text();

        var _WOID = $('#txtWOID').val();

        //alert(_WOID);

        $.ajax({
          url:'getWorkOrders.php',
          type:'POST',
          data:{id:_WOID},
          dataType:'json',
          success:function(output){


            for (var key in output) {

                if (output.hasOwnProperty(key)) {

                    $("<div class='child-list-workorder'>

                        <div class='list-workorder'>

                            <div class='list-workorder-header'>

                                <h3 class='list-workorder-id'>" + output[key] + "</h3>

                            </div>

                            <p>" + Sample + ":" + key + "</p>

                        </div>

                    </div>").appendTo("<div class='parent-list-workorder'>");

                    //alert(output[key]);

                }
            }

            console.log(output);              

          }

        });

    });

});

Am I missing something?

Answer 1

Your problem is in the code below:

.appendTo("<div class='parent-list-workorder'>");

The parameter of appendTo() should also be a valid selector.

you can try this instead:

.appendTo("div.parent-list-workorder");

granting that div.parent-list-workorder already exists.

Answer 2

You have two problems. First, you need to use a selector as an argument to .appendTo() , not an HTML string. Second, you need to remove or escape the newlines in the HTML string.

$("<div class='child-list-workorder'>\
     <div class='list-workorder'>\
       <div class='list-workorder-header'>\
         <h3 class='list-workorder-id'>" + output[key] + "</h3>\
       </div>\
       <p>" + Sample + ":" + key + "</p>\
    </div>\
 </div>").appendTo("div.parent-list-workorder");