创建一个新元素并将克隆附加到此元素

时间:2013-10-28 15:47:29

标签: javascript jquery

初始情况如下:

<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语句也是可以改进的。

3 个答案:

答案 0 :(得分:5)

克隆整个div会更容易。试试这个:

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

Example fiddle

答案 1 :(得分:0)

一个班轮: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);
  });

答案 2 :(得分:0)

不使用克隆

的非常简单的方法
var div = $("#bigDiv").find("div").first().html();
$("input").first().after(div);

WORKING DEMO