how can I clone the current object in a click handler in javascript

Question

I want to dynamically add textfield to the webform. There is 'add' icon beside the existing textfield. when clicking the icon, a new combination of 'add' icon and textfield are added. Then, it is the same situation with the new 'add' icon. How can do that in javascript or jquery framework?

Answer 1

Use the clone() method to clone an element.

$("#add").live("click", function(ev){
    var clone = $(ev.target).clone();
    //Add the clone to the document, eg: clone.appendTo("body");
})

See also: JQuery Docs - Clone .

Answer 2

Assuming something like:

<div><input><button>add</button></div>

Then try:

var elm;
$('button').click(function() {
    elm = $(this).parent();
    elm.after( elm.clone(true) );
});

Demo: http://jsfiddle.net/KL7QZ/2/

Passing true in the .clone method also clones events.