Problem using jquery clone () for text field

Question

This is what I need to clone:

<p id="ex">
<label for="c2">Enter your Choice</label>
<br>
<input type="text" name="c2_r" id="c2" value="" />
<br> 
</p>

I am cloning this statement:

$("#def").append($("#ex").clone());

As I see it, it clones the element p. But, in fact, I want him to clone the p tag and set the value of the text field inside it to "". Can someone explain to me what to do? In addition, I need the textbox identifier inside the cloned element to be different from the original. Please help. Thanks

Answer 1

// first we grab the clone. We also want to change the <p> id, as it's
// not valid to have two elements within a page with the same ID.
$('#ex').clone().attr({
  id: 'newpid' // paragraph ID
// next, we alter the input inside it (change ID, clear value).
}).find('input').attr({
  value: '',
  id: 'newid' // <input> ID
// call end to stop the ".find", then add it to the #def element
}).end().appendTo('#def');

Working example: http://www.jsfiddle.net/F4rRQ/1/

Answer 2

Here you go ...

var clonedP = $('#ex').clone();

clonedP
 .attr({ id: 'new_id' })
 .find('input')
  .attr({id: 'new_input_id'})
  .val('');

$('#def').append(clonedP);

id, id .

name (.. ), .