JQuery - Создайте новый элемент и добавьте его в существующий элемент

Question

У меня есть 4 столбца div, которые сортируются. Я хочу создать портлет и добавить его в определенный столбец.

Текущий код у меня есть:

<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> 

Может кто-то пожалуйста, покажите мне, как я могу добавить в #ToDo новый .portlet?

Я хочу, чтобы добавить этот HTML

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

Answer 1

Вы можете использовать .after() для вставки HTML после другого элемента (селектор). В вашем случае использовать

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

Вы можете проверить его на HTML в demo