Javascript 如何在单击时向列表中添加新的UI元素？

我需要创建以下名为“类别”的面板 每次用户单击“+新类别”链接时，
将添加一个新的文本框矩形，用户可以在其上输入类别。 对于每一个添加的类别，一个有序的编号在侧面表示

目前这是我的代码：

HTML: JSIDLE链接：

每次用户单击“+新类别”链接时，都会出现“新订购”文本框 应添加UI元素，如下图所示：

此外，我还需要：

我需要添加删除列表中某个类别的可能性 通过单击特定文本框的“x”

我可以在列表的其他元素上单击并拖动它

必须使用

.append（）

将新元素添加到html容器中，并使用

.remove（）

删除特定元素。 可以使用“单击事件”来添加和删除元素

例如：

$（“.new category”）。单击（函数（）{
$（'#container'）。追加（'新类别'）；
});
$（“#容器”）。在（“单击”，“关闭类别”，函数（事件）{
$（this.parent（）.remove（）；
});

类别
您有任何代码吗。这是课堂上的、专业的还是业余爱好的项目。非常感谢！。你的推荐信对我所需要的东西确实有帮助，只是做了一些调整。如何使我的div可编辑以进行文本输入？在文本输入中使用事件键
<div class="row">
     <div class="col-lg-3">
           <section class="panel">
                <header class="panel-heading">
                   <h2 class="panel-title">Categories</h2>
                   <a class="new-category" href="#add-new-app-category">+ New Category</a>
                </header>
           </section>
     </div>
</div> <!-- END <div class="row"> -->

.panel {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
/*    border-radius: 4px;*/
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
/*    overflow-y: auto;*/
    width:431px;
}


.panel-heading {
    background: #fdfdfd;
/*    border-radius: 5px 5px 0 0;*/
/*    border-bottom: 1px solid #DADADA;*/
/*    padding: 18px;*/
    position: relative;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 22px;
    color: #2baab1;
    font-family:'Lato', sans-serif;
    display:inline-block;
}

.panel-body {
    background: #fdfdfd;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
/*    border-radius: 5px;*/
}


.panel-body {
    padding: 15px;
}


.new-category {
    float:right;
    margin-top:5px;
    text-decoration:none;
}

.new-category:link , .new-category:visited, .new-category:hover{
    text-decoration:none;
}

function createCategory(){
  var htmlStr = '<h2 class="panel-title">Categories</h2>
               <a class="new-category"href="#add-new-app-category">+ New Category</a>'
  $('#yourWrapperDiv').append(htmlStr);

}

<a id="newCategory" onclick="createCategory()">new category</a>

$('#newCategoryLink').click(function(){
  createCategory();
});