Cloning an HTML element using JQuery Clone() function.

Its just  an another amazing feature of JQuery. You can simply duplicate an HTML element using the Clone() function. for example, if you want to add new Table Row dynamically in to a Table, user can use Clone() function. Here is an example code,

HTML

<form>
    <table border="1" id="experiance">
        <tr>
            <th>Sl No</th>
            <th>Language</th>
            <th>Experiance</th>
            <th>Proficient</th>
        </tr>
        <tr>
            <td> <input type="text" /> </td>
            <td> <input type="text" /></td>
            <td> <input type="text" /></td>
            <td>
                <select>
                     <option value = "1">Beginner</option>/>
                     <option value = "2">Itermediate</option>/> 
                     <option value = "3">advanced</option>/>
                </select> 
            </td>
        </tr>
    </table>
    <input id="add" type="button" value="Add New Row" />
</form>

JQuery

$("#add").on('click', function () {
    var rows = 1;    
    var lastRow;
    lastRow = $('#experiance tr').last().clone().appendTo("#experiance");      
});

DEMO