Cloning an element with file input child and emptying it

Referring to this question I need a solution for it:

HTML:

<input type="file" />
<span id="add-more-files">Add more</span>

jQuery:

$('#add-more-files').click(function()
{
  开发者_运维技巧 var cloned = $(this).prev().clone();
   $(cloned).insertBefore($(this));
});

Note: You really should ask a new question, don't just copy your old one and make people jump around to figure out what you want.

Assuming the HTML:

<div class="wrap"><input type="file" /></div>
<span id="add-more-files">Add more</span>

You can do:

$('#add-more-files').click(function(){
    $("<div>", {class:"wrap"}) //Create a div
        .append($("<input>", {type:'file'})) //Add an input element
        .insertBefore(this); //Insert it into the DOM
});

This creates a new div and input tag structure and then inserts it into the DOM before the clickable span. See here for a working example.

Note: It doesn't insert a new input into the same div. If that's what you wanted see @jAX's answer.

$('#add-more-files').click(function()
{
   $('<input type="file" />').insertBefore($(this));
});