JQuery append new div to its parent

Question

I have following div tag with child tags.

<div class="span6"> <div class="control-group"> <label class="control-label" for="inputEmail">Item Name</label> <div class="controls"> <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> </div> </div> </div>

And I wanna append child <div class="control-group"></div> to parent <div class="span6"></div> according to the array. So I have written the javascript is as below.

$.each(categories, function (k, elem) { var options = ''; var options = ' <div class="control-group"> <label for="StockCategory">Category</label> <div class="controls"> <select class="input-xlarge get-category"> '; options +='<option value="">Select Category</option>'; $.each(data, function(key, value) { options += '<option value="' + key + '">' + value + '</option>'; }); options +=' </select> </div> </div>'; $("div.span6").append(options); }

So I wanted to append these child divs according to array but Its not happening. So I needed the following result.

<div class="span6"> <div class="control-group"> <label class="control-label" for="inputEmail">Item Name</label> <div class="controls"> <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> </div> </div> <div class="control-group"> <label class="control-label" for="inputEmail">Item Name</label> <div class="controls"> <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> </div> </div> <div class="control-group"> <label class="control-label" for="inputEmail">Item Name</label> <div class="controls"> <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> </div> </div> <div class="control-group"> <label class="control-label" for="inputEmail">Item Name</label> <div class="controls"> <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> </div> </div> <div class="control-group"> <label class="control-label" for="inputEmail">Item Name</label> <div class="controls"> <input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."> </div> </div> </div>

Please help me to get it. The work is more appreciated.

i don't understand...So I needed the following result....and i don't see anything with StockCategory and so on... are you saying u just need to clone the first div ... seeing you result looks like that is what u want... — bipen
– bipen, Commented Feb 13, 2013 at 10:46

Aratidgr8 · Accepted Answer · 2013-02-13 11:12:18Z

Below jquery will do the needful.

<script type="text/javascript"> $(document).ready(function(){ var data = { val1 : 'text1', val2 : 'text2', val3 : 'text3' }; var options = ''; $.each(data, function(key, value) { /* options = '<div class="control-group"><label for="StockCategory">Category</label><div class="controls"><select class="input-xlarge get-category">'; options += '<option value="">Select Category</option>'; options += '<option value="' + key + '">' + value + '</option>'; options +='</select></div></div>'; */ options = '<div class="control-group"><label class="control-label" for="' + key + '">' + key + '</label><div class="controls">'; options +='<input type="text" id="' + key + '" class="input-xlarge" placeholder="' + value + '">'; options +='</div></div>'; $("div.span6").append(options); }); }); </script>

Jamie Mason · Accepted Answer · 2013-02-13 10:44:43Z

1

The first thing I would look at is that span6 is missing a closing </div> - does that fix it?

answered Feb 13, 2013 at 10:44

Jamie Mason

4,2212 gold badges35 silver badges42 bronze badges

Comments

Dinesh Vadivel · Accepted Answer · 2013-02-13 10:48:16Z

Try to put the append code outside the $.each

var options = ''; $.each(categories, function (k, elem) { var options = ' <div class="control-group"> <label for="StockCategory">Category</label> <div class="controls"> <select class="input-xlarge get-category"> '; options +='<option value="">Select Category</option>'; $.each(data, function(key, value) { options += '<option value="' + key + '">' + value + '</option>'; }); options +=' </select> </div> </div>'; } $("div.span6").append(options);

Panos Bariamis · Accepted Answer · 2013-02-13 10:54:10Z

try to change your script as

var options = ''; $.each(categories, function (k, elem) { options += ' <div class="control-group"> <label for="StockCategory">Category</label> <div class="controls"> <select class="input-xlarge get-category"> <option value="">Select Category</option> '; $.each(data, function(key, value) { options += '<option value="' + key + '">' + value + '</option>'; }); options +=' </select> </div> </div>'; } $("div.span6").append(options);

Collectives™ on Stack Overflow

JQuery append new div to its parent

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related