javascript - How do I duplicate/repeat a HTML element after a mouseclick?

Question

I am trying to repeat or duplicate this textarea:

<textarea name="Content" type="text" 
    id="Content" value="Content" 
    onfocus="if(this.value==this.defaultValue)this.value='';"
    onblur="if(this.value=='')this.value=this.defaultValue;">
</textarea>

The textarea is already once defined in the original template. I just need to enable users to add another textarea below the original one. I've tried using another person's JQuery solution, but as a newbie, I was not able to really make a lot of sense of it. Anyone of you able to at least assist me with this? I would also like to know which tools are best for this.

Answer 1

Try to use clone(),

$('body').append($('#Content').clone());

NOTE: You need to create an array of elements, because id must be unique like

<textarea name="Content[]" type="text" 
    id="Content[]" value="Content" 
    onfocus="if(this.value==this.defaultValue)this.value='';"
    onblur="if(this.value=='')this.value=this.defaultValue;">
</textarea>

Script

$('body').append($('textarea[name="Content[]"').clone());