Javascript 将当前状态下的DOM中的HTML追加/复制到div

我在一页上有一张表格。表单包含文本输入、复选框、选择（交互元素）。我希望用户能够单击按钮，在当前状态下在页面的其他位置复制表单的一部分，保留输入的文本、选中的复选框和选中的选项

目前我有这个，它附加了HTML，但是它在页面加载时的状态下获取HTML

$('#create_unique_field').click( function() {
    $('#unique_field_cnt').append($('#template_cnt').html());
});

我尝试过使用on（）进行委托，结果也是一样的

$( 'body' ).on( 'click', '#create_unique_field', function() {
    $('#unique_field_cnt').append($('#template_cnt').html());
});

---

我想要的是HTML的当前状态，而不是加载页面时的HTML。如何才能做到这一点？

这样不行，您需要绑定表单元素的值，并使用该数据创建新表单元素。它或多或少地落在

var inputText=$（'#someInputEl'）.val（）上然后将该值应用于新表单元素，然后将其插入

试试这个：

<input type="text" id='one'>
<button>submit</button>   
<div id="target"></div>   

$(function(){
    $('button').click(function(){
        var inputVal = $('#one').val();
        var newInputEl = $("<input type='text' id='two'>");
        newInputEl.val(inputVal);
        $('#target').html( newInputEl );
    });    
});


提交
$（函数（）{
$（“按钮”）。单击（函数（）{
var inputVal=$（'#one'）.val（）；
var newInputEl=$（“”）；
newInputEl.val（inputVal）；
$（'#target'）.html（newInputEl）；
});    
});

这是一个粗略的草图，但你应该这样做，这里是。
我会接受答案，因为这是一个很好的答案，但我仍然会想象，既然html存在于我的inspect元素中，我可以自由复制，javascript/jquery也必须有一种访问html当前状态的方法。请看一看。你提到了按钮点击，所以我以为你不想要双向绑定。