How to Append the data to a div?
<p>I have a function where on button click I add columns, now what I want is on button click the column I am adding, I want that to append to another div in my case both button and appended data both are added in same div for now</p>

<p>Here is the code I am working on</p>

<pre><code>var i = 1;
$(document).ready(function() {             
    $("button[id='columnadd']").click(function () {
       // create the element
       var domElement = $('&lt;div id="shoppingCart' + i++ + '" class="shoppingCart"&gt;&lt;h2 class="ui-widget-header"&gt;Add Menu Items Here&lt;/h2&gt;&lt;aside class="ui-widget-content" id="droppable"&gt;&lt;ol&gt;&lt;li class="placeholder"&gt;Add your items here&lt;/li&gt;&lt;/ol&gt;&lt;/aside&gt;&lt;/div&gt;');

       $(this).after(domElement);
       // at this point you have domElement in your page
       //.appendTo("#columnhoder")
       // make it droppable
       domElement.find("ol").droppable({
           accept: '.small_box li',
           greedy: true,
           drop: function (event, ui) {
               alert(1);
               makeItDroppableToo(event, ui, this);
               //$(this).find(".placeholder").remove();
               //$("&lt;li&gt;&lt;/li&gt;").text(ui.draggable.text()).appendTo(this);                         
           }
       });
});
</code></pre>

<p>i want this </p>

<pre><code>var domElement = $('&lt;div id="shoppingCart' + i++ + '" class="shoppingCart"&gt;&lt;h2 class="ui-widget-header"&gt;Add Menu Items Here&lt;/h2&gt;&lt;aside class="ui-widget-content" id="droppable"&gt;&lt;ol&gt;&lt;li class="placeholder"&gt;Add your items here&lt;/li&gt;&lt;/ol&gt;&lt;/aside&gt;&lt;/div&gt;'); 
</code></pre>

<p>to append to this div</p>

<pre><code>&lt;div id="columnholder"&gt;div&gt;
</code></pre>
