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 clone it by this statement:

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

As i see, it is cloning the p element. But,i actually want it to clone the p tag and set the value of textbox inside it to “”. Can someone explain me what to do ? Also, i need to set the id of the textbox inside 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>'s id, as it's
// not valid to have two elements within a page with the same ID.
$('#ex').clone().attr({
  id: 'newpid' // paragraph's ID
// next, we alter the input inside it (change ID, clear value).
}).find('input').attr({
  value: '',
  id: 'newid' // <input>'s 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/