Databases
StackOverflow2013
Postsdbo
POJQuery append new div to its parent
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery append new div to its parent
    text
    copied!<p>I have following div tag with child tags. </p> <pre><code>&lt;div class="span6"&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" for="inputEmail"&gt;Item Name&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And I wanna append child <code>&lt;div class="control-group"&gt;&lt;/div&gt;</code> to parent <code>&lt;div class="span6"&gt;&lt;/div&gt;</code> according to the array. So I have written the javascript is as below.</p> <pre><code>$.each(categories, function (k, elem) { var options = ''; var options = ' &lt;div class="control-group"&gt; &lt;label for="StockCategory"&gt;Category&lt;/label&gt; &lt;div class="controls"&gt; &lt;select class="input-xlarge get-category"&gt; '; options +='&lt;option value=""&gt;Select Category&lt;/option&gt;'; $.each(data, function(key, value) { options += '&lt;option value="' + key + '"&gt;' + value + '&lt;/option&gt;'; }); options +=' &lt;/select&gt; &lt;/div&gt; &lt;/div&gt;'; $("div.span6").append(options); } </code></pre> <p>So I wanted to append these child divs according to array but Its not happening. So I needed the following result.</p> <pre><code>&lt;div class="span6"&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" for="inputEmail"&gt;Item Name&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" for="inputEmail"&gt;Item Name&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" for="inputEmail"&gt;Item Name&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" for="inputEmail"&gt;Item Name&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="control-group"&gt; &lt;label class="control-label" for="inputEmail"&gt;Item Name&lt;/label&gt; &lt;div class="controls"&gt; &lt;input type="text" id="inputEmail" class="input-xlarge" placeholder="Enter item name here..."&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Please help me to get it. The work is more appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload