jQuery获取整个输入元素，包括其值

Question

我有以下代码：

// Add a single component
$(document).on("click", ".copy-component .fa.fa-plus", function() {
    var component = $(this).closest(".one-component");
	var componentContainer = component.closest(".x_panel");

    componentContainer.append(component[0].outerHTML);
});

<div class="col-md-12 col-sm-12 col-xs-12 no-padding">
    <div class="x_panel border-true">
        <div class="x_title component-field">...</div>
        <div class="one-component">
            <ul class="nav navbar-right panel_toolbox panel-row">...
        </div>
        <div class="x_content eight no-margin-top component-container">
            <form id="demo-form" data-parsley-validate="" novalidate="">
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                        <label class="input-upper-title">Cum. Len. (ft)</label>
                            <div class="has-checkbox">
                               <input type="checkbox"><input disabled="disabled" type="text" id="" class="form-control">
                            </div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">...</div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">...</div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">...</div>
                </div>
            </form>
        </div>
    </div>
</div>

这是当前的样子： 如您所见，输入值没有被复制。

第一行最初位于此处，但是通过单击底部的“添加”按钮来动态添加第二行。

当我单击图标“ +”（.fa.fa-plus）时，我希望添加一个新组件，包括当前输入字段中的内容。

这就是我想要的：

如何修改我的jQuery代码以实现此目的？

Answer 1

您应该附加.clone()元素，而不要获取outerHTML并将其附加。

  

创建一组匹配元素的深层副本。

componentContainer.append(component.clone(true));

$('button').click(function() {
  $('#a').clone().appendTo('div');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add</button>
<input id="a" />
<div>

</div>