1. 程式人生 > >從一個div向另一個div裡面追加自己的元素

從一個div向另一個div裡面追加自己的元素

<div id="content" class="list"></div>
<div class="add_select">
<input type="text" name='after'maxlength="5" placeholder="選擇新增或自定義(不超過5個字)">
<button>
<img src="/Public/Home/images/add.png" alt="" width="16" height="16">
<span>自定義新增</span>
</button>
</div>
<div id="select_ect" class="list"style="margin-bottom:15%;">
<span>借款合同</span>
<span>房本</span>
<span>委託書</span>
<span>身份證</span>
<span>戶口本</span>
<span>結婚/離婚證</span>
<span>離婚協議書</span>
<span>公章</span>
<span>公司章程</span>
<span>營業執照</span>
<span>組織機構程式碼</span>
</div>


<script>

$(function(){
$('#select_ect').on('click','span',function(){//事件委託
$('#content').append('<span>' + $(this).html() + '</span>');
//從select_ect中選取的span追加在content的後面。
$(this).remove();
});


$('.add_select button').click(function(event) {
$('#content').append('<span>' + $("input[name='after']").val() + '</span>');
$("input[name='after']").val('');
});


$('#content').on('click','span',function(){
$('#select_ect').append('<span>' + $(this).html() + '</span>');
$(this).remove();
});

})
</script>