Optimize way to append element in html using jquery

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?

You're appending to a new DIV, but never adding that new DIV to the DOM. — Barmar, Oct 17 '14 at 03:41
if your're referring to this `
`, that already exist inside my `body tag` — Waelhi, Oct 17 '14 at 03:50
`$("<...>")` is not how you access an existing element, it's how you create a new element. See @Kuma's answer. — Barmar, Oct 17 '14 at 03:54
yes sir. I already updated my code. but still it doesn't work. can you make your own answer sir? — Waelhi, Oct 17 '14 at 04:05
@Unknownymous2 Something you should read up on is XSS exploits. — Joseph Lennox, Oct 17 '14 at 04:10

score 2 · Answer 1 · answered Oct 17 '14 at 03:42

2

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.

answered Oct 17 '14 at 03:42

Rey Libutan

5,226
9
42
73

yes .. `div.parent-list-workorder` is already exist in `body`. ANyways I tried your code but my `console.log` give me this error: `Uncaught SyntaxError: Unexpected token ILLEGAL.` in line 25 which is the `$("
`.
– Waelhi Oct 17 '14 at 03:48
@Unknownymous2 To split a string across multiple lines, you need to escape the newlines with `\`. – Barmar Oct 17 '14 at 03:53
@Barmar can you make a post so i can trace to my code what are you trying to say? – Waelhi Oct 17 '14 at 04:04

score 1 · Accepted Answer · answered Oct 17 '14 at 04:08

1

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

answered Oct 17 '14 at 04:08

Barmar

741,623
53
500
612

I already tried your code sir but i get this error in `console.log`: [HERE!](http://s23.postimg.org/crmyqgowr/error.png) – Waelhi Oct 17 '14 at 05:31
You haven't set the variable `Sample`. Where is that supposed to come from? – Barmar Oct 17 '14 at 05:33
last question sir., How can I click those dynamically created elements since they are not created in DOM? – Waelhi Oct 17 '14 at 06:00
1

http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Barmar Oct 17 '14 at 06:02

Optimize way to append element in html using jquery

2 Answers2