CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Waelhi
Waelhi

Reputation: 315

Optimize way to append element in html using jquery

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?

Upvotes: 0

Views: 791

Answers (2)

Barmar
Barmar

Reputation: 781974

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");

Upvotes: 1

Rey Libutan
Rey Libutan

Reputation: 5314

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.

Upvotes: 2

Related Questions