将表单输入克隆为jQuery对象，并使用wrap div/li显示它

当我尝试包装或向jQuery选择器添加更多html内容时，我得到了[object object]或[object HTMLInputElement]

我正试图：

复制输入字段

清除所有数据（保留id、类、类型 ect…（firefox的问题是保留数据，为什么我手动 清除数据）

使用列表标记包装输入并包含 按钮（div元素）

我能够部分地完成这项工作，我能够将上述三件事中的任意两件结合起来（奇怪吧？）。主要的问题是，在使用我为所有三个步骤编写的代码时，我总是得到

[object object]

或

[object htmlinput element]

。（我能够附加项，这修复了对象问题，但之后我无法包装它并添加按钮）

下面是我的html代码：

<section id="fileInputs">
    <li>
        <!-- Jquery looks for li to add more of these -->
        <input multiple name="filetoupload001" type="file">
        <div class="square clicked">
            <span class="plus"><i class="fa fa-plus plus"></i></span>
            <span class="minus"><i class="fa fa-minus minus"></i></span>
        </div>
    </li>
</section>

这里是我的jQuery：

$(function() {
    $("#fileInputs").on("change", "input[type=file]", function() {
            var item = $(this).clone(false);
            //var item = $.extend({}, $(this) ); //Seems same results as clone

            item[0].name = "filetoupload002" //I have a function -> leftPad(i, 3);
            item[0].files[0] = ''; //Firefox fix/hack - Clear out those pesky file that shouldn't have copy over since .clone() not supoose to copy data
            item[0].value = '';

            var a = document.createElement('li');
            var b = item; // Shows [object Object]
            // var b = item[0]; // Shows [object HTMLInputElement]
            // var b = $.parseHTML(item); // null
            // var b = $.parseHTML(item[0]); // null
            // var b = '<input multiple name="filetoupload'+leftPad(i, 3)+'" type="file"></input> '; // Work Perfect!! However would like to use item insted
            var c = '<div class="square"><span class="plus"><i class="fa fa-plus plus"></i></span><span class="minus"><i class="fa fa-minus minus"></i></span></div></li>';

            a.innerHTML = b;
            a.innerHTML += c;

            $(this).parent().parent().append(a); // This is the end result I want however would like to use clone item instead of hard code html
        }
    });
});

$（函数（）{
$（“#fileInputs”）。在（“更改”、“输入[type=file]”上，函数（）{
var item=$（this）.clone（false）；
//var item=$.extend（{}，$（this））；//结果似乎与clone相同
项[0].name=“filetoupload002”//I有一个函数->leftPad（I，3）；
项[0]。文件[0]=''；//Firefox修复程序/hack-清除那些不应该复制的讨厌文件，因为.clone（）不支持复制数据
项[0]。值=“”；
var a=document.createElement（'li'）；
var b=item；//显示[对象]
//var b=项[0]；//显示[object HTMLInputElement]
//var b=$.parseHTML（项）；//null
//var b=$.parseHTML（项[0]）；//null
//var b=''；//工作完美！！但是希望使用所安装的项
变量c=''；
a、 innerHTML=b；
a、 innerHTML+=c；
$（this）.parent（）.parent（）.append（a）；//这是我想要的最终结果，但是我希望使用克隆项而不是硬编码html
}
});
});

我已经做了几个小时了，真的需要一些帮助。同时，我将重新开始并尝试：

包含一个输入和一个div的复制列表（按钮）

清除输入数据

在节内的屏幕上输出新输入

---

一个更简单的模式是保持所有文件输入的名称相同，并通过服务器上的索引访问它们。这也省去了在添加或删除新项目时必须维护增量名称的麻烦。然后，您只需复制更改输入的父级

li

。试试这个：

$("#fileInputs").on("change", "input[type=file]", function(){
    var $li = $(this).closest('li').clone();
    $li.find('input').prop({
        files: [],
        value: ''
    });
    $('#fileInputs').append($li);
});

---

您为b获得[object HTMLInputElement]，因为您试图将JavaScript创建的对象添加到innerHTML而不是元素的HTML字符串中。您可以使用outerHTML来实现这一点

另外，请注意，这里需要从item获取原始DOM元素，因此需要使用b=item[0]

$(function() {
  $("#fileInputs").on("change", "input[type=file]", function () {
    var item = $(this).clone(true, true);

    item[0].name = "filetoupload002"//I have a function -> leftPad(i, 3);
    item[0].files[0] = ''; //Firefox fix/hack - Clear out those pesky file that shouldn't have copy over since .clone() not supoose to copy data
    item[0].value = '';

    var a = document.createElement('li'); // Element created using JavaScript    
    var b = item[0];            
    var c = '<div class="square"><span class="plus"><i class="fa fa-plus plus"></i></span><span class="minus"><i class="fa fa-minus minus"></i></span></div></li>';

    a.innerHTML += b.outerHTML;
    a.innerHTML += c;

    $(this).parent().parent().append(a);        
  });
});

$（函数（）{
$（“#fileInputs”）。在（“更改”、“输入[type=file]”上，函数（）{
var item=$（this）.clone（true，true）；
项[0].name=“filetoupload002”//I有一个函数->leftPad（I，3）；
项[0]。文件[0]=''；//Firefox修复程序/hack-清除那些不应该复制的讨厌文件，因为.clone（）不支持复制数据
项[0]。值=“”；
var a=document.createElement（'li'）；//使用JavaScript创建的元素
var b=项目[0]；
变量c='

'； a、 innerHTML+=b.outerHTML； a、 innerHTML+=c； $（this.parent（）.parent（）.append（a）； }); }); JSFiddle：