How to change innerHTML content such as(input field names,ids,onclick) attributes

Question

I want to copy all content of a div into another div, but before copying I need to change all input fields names and ids. See the code below.

 <div id="first_div">
    <input type="text" name="firstname" id="firstname">
    <select name="marital_status" id="marital_status">
        <option value="1" selected='selected'>Select</option>
        <option value="2">Single</option>
        <option value="3">Married</option>
   </select>
 </div>
 <div id="second_div">
 </div> 

Now I want to copy content of first_div into second_div,but before copying I need to change input field firstname into last_name, how to do it?

Answer 1

As I see you tagged jQuery in the question, you could use jQuery clone method to get started quickly : https://api.jquery.com/clone/

var clone = $("#first_div").clone();

then modifying the clone innerHTML like so

clone.find("#firstname").attr("id", "lastname"); // modifying div id
// do the same for every element you want to modify id, etc
//then finally append it to the second_div
$("#second_div").html(clone.html());