創建一個新元素並將克隆添加到此元素

Question

初始情況如下：

<div id="bigDiv">
    <div><input type="file"/></div>
</div>

克隆后所需的結果：

<div id="bigDiv">
    <div><input type="file"/></div>
    <div><input type="file"/></div>
</div>

我試過以下聲明：

var elm = $('#bigDiv :input[type=file]').change(function(event) {
    console.log('changed');
    $('#bigDiv :input[type=file]').eq(0).clone(true).val('').appendTo('#bigDiv');
});

這可行。 我的問題是，如何將這個新文件輸入元素附加到新的div元素中，該元素也必須先創建？ （請參見上面的預期結果）

我認為我的jQuery語句也是可改進的。

Answer 1

克隆整個div會更容易。 嘗試這個：

var elm = $('#bigDiv :input[type=file]').change(function(event) {
    var $newDiv = $('#bigDiv div').first().clone(true).appendTo('#bigDiv');
    $('input[type="file"]', $newDiv).val('');
});

小提琴的例子

Answer 2

一線： http : //jsfiddle.net/6QL3k/2/ ，也可以在創建時使用

var elm = $('#bigDiv').on('change',' :input[type=file]',function(event) {
    console.log('changed');
     $(this).clone().appendTo($(this).parent().parent()).wrap('<div></div>');    
});

http://jsfiddle.net/6QL3k/

  var elm = $('#bigDiv :input[type=file]').change(function(event) {
      console.log('changed');
      var next = $(this).clone();
      var wrapNext = $('<div></div>');
      wrapNext.append(next);
      $(this).parent().after(wrapNext);
  });

Answer 3

不使用克隆的非常簡單的方法

var div = $("#bigDiv").find("div").first().html();
$("input").first().after(div);

工作演示