Adding HTML elements at runtime in JQuery - Not working as expected

Question

I'm adding the HTML elements in runtime by AJAX call from Javascript file.

I want to use combo-box drop down element to show the list of datas. To acheive this, I'm trying like below in my script file.

    $("#myList").append("<select id=\"mlist\" >");

    for(var i=0;i<datas.length;i++){
        $("#myList").append("<option>"+datas[i]+"</option>");
     }

    $("#myList").append("</select>");

But in the browser, it shows the elements generated as

<select id="mlist"> </select>
 <option>INDIA</option>
 <option>CHINA</option>
  <option>JAPAN</option>

I want the options to be inserted in between to the select element. Anyone kindly suggest me where I'm doing wrong?

Amit Joki · Accepted Answer · 2014-11-28 14:52:53Z

3

That's not how you do it..You need to find the already appended <select> and then append to it.

var slct =  $("#myList").append("<select id='mlist' />").find('#mlist'); // append the select and find it
for(var i = 0; i < datas.length; i++) {
    slct.append("<option />", { text: datas[i] }); // now append
}

answered Nov 28, 2014 at 14:52

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Steve Wellens Over a year ago

Good, it's much faster to move the jquery select outside the loop and use a temporary variable (slct).

Amit Joki Over a year ago

@CarlJohn glad to have helped :)

CarlJohn Over a year ago

If I want to append the same drop down box element in next row, after inserting some label means, shall i still use append method?

Rory McCrossan · Accepted Answer · 2014-11-28 14:53:27Z

0

When you append an element it is closed automatically, so you don't need the second append() to add the closing tag.

Also, you need to append your option elements to the select, not #myList. Try this:

var $select = $("<select />", { id: 'mlist' }).appendTo('#myList');
for (var i = 0; i < datas.length; i++) {
    $select.append($('<option />', { text: datas[i] }));
}

answered Nov 28, 2014 at 14:53

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Collectives™ on Stack Overflow

Adding HTML elements at runtime in JQuery - Not working as expected

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related