JQuery - Create new element and append it to existing element

Question

I've got 4 div columns which are Sortable. I want to create a portlet and append it to a specific column.

The current code I have is:

<div class="column" id="ToDo">
   <h1>TO DO</h1>
   <div class="portlet" id="1">
      <div class="portlet-header">Item 001</div>
      <div class="portlet-content">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit
      </div>
   </div>
</div>
<div class="column" id="InProgress">
   <h1>IN PROGRESS</h1>
</div>
<div class="column" id="InReview">
   <h1>IN REVIEW</h1>
</div>
<div class="column" id="Done">
   <h1>DONE</h1>
</div>

Can someone please show me how I can append a new .portlet in #ToDo ?

I want append this html

<div class="portlet" id="12">
    <div class="portlet-header"> NEW ITEM </div>
    <div class="portlet-content"> SOME STUFF </div>
</div>

Answer 1

You can use .after() to inserting html after another element (selector). In your case use

$("#ToDo > div:last").after("Your html");

You can test it on your html in demo