CODEWITHSUNDEEP
javascripthtml
Michael Swarts
Michael Swarts

Reputation: 3921

Duplicating HTML elements and the contents within in the HTML document

Suppose I have the following code:

      <div id="Car1Container">
        <label id="Car1YearLabel" for="Car1Year">Year</label>
        <input id="Car1Year" name="Car1Year" type="text" maxlength="4" onfocus="FieldOnFocus(this)" onkeydown="FieldOnKeyDown(this)" onkeyup="FieldOnKeyUp(this)" onblur="FieldOnBlur(this)"/>
        <label id="Car1MakeLabel" for="Car1Make">Make</label>
        <input id="Car1Make" name="Car1Make" type="text" maxlength="15" onfocus="FieldOnFocus(this)" onkeydown="FieldOnKeyDown(this)" onkeyup="FieldOnKeyUp(this)" onblur="FieldOnBlur(this)"/>
        <label id="Car1ModelLabel" for="Car1Model">Model</label>
        <input id="Car1Model" name="Car1Model" type="text" maxlength="16" onfocus="FieldOnFocus(this)" onkeydown="FieldOnKeyDown(this)" onkeyup="FieldOnKeyUp(this)" onblur="FieldOnBlur(this)"/>
        <button id="AddVehicleButton1" name="AddVehicleButton1" type="button" onclick="AddVehicle()">Add Vehicle</button>
      </div>
      <div id="Car2Container" style = "display: none;">
        <label id="Car2YearLabel" for="Car2Year">Year</label>
        <input id="Car2Year" name="Car2Year" type="text" maxlength="4" onfocus="FieldOnFocus(this)" onkeydown="FieldOnKeyDown(this)" onkeyup="FieldOnKeyUp(this)" onblur="FieldOnBlur(this)"/>
        <label id="Car2MakeLabel" for="Car2Make">Make</label>
        <input id="Car2Make" name="Car2Make" type="text" maxlength="15" onfocus="FieldOnFocus(this)" onkeydown="FieldOnKeyDown(this)" onkeyup="FieldOnKeyUp(this)" onblur="FieldOnBlur(this)"/>
        <label id="Car2ModelLabel" for="Car2Model">Model</label>
        <input id="Car2Model" name="Car2Model" type="text" maxlength="16" onfocus="FieldOnFocus(this)" onkeydown="FieldOnKeyDown(this)" onkeyup="FieldOnKeyUp(this)" onblur="FieldOnBlur(this)"/>
        <button id="AddVehicleButton2" name="AddVehicleButton2" type="button" onclick="AddVehicle2()">Add Vehicle</button>
      </div>

Currently, AddVehicle() just changes the Car2Container style to 'block'. I have a finite number of these and I want it to be dynamic. I have some code to attempt to write it to a page, but it erases everything on the page and doesn't really work.

I want to write an AddVehicle() function to duplicate the Car1Container and place it right below in the HTML document (except all the 1s become 2s). This is turning out to be quite a challenge! Can anyone help get me moving in the right direction? Thanks!

Upvotes: 1

Views: 99

Answers (5)

bezmax
bezmax

Reputation: 26142

You can use cloneNode(true) for cloning the block, then go through childNodes property to find all the children (maybe recursively) and replace their ids and names.

Added: Here's a working example:

var container = document.getElementById('Car1Container'); 
var copy = container.cloneNode(true); 
container.parentNode.appendChild(copy);

Upvotes: 1

bcm
bcm

Reputation: 5500

Without using jQuery, just raw JavaScript you could use insertAdjacentHTML.

Example: document.getElementById(‘ID’).insertAdjacentHTML(position, markup)

where position can be "beforebegin", "afterbegin", "beforeend", or "afterend"

http://lionheart.sg/insertadjacenthtml/

This should be faster than the clone method in jQuery.

Upvotes: 0

fmsf
fmsf

Reputation: 37177

If you want to use jquery you can just do:

var index = 1;
function copycar(){
 index++;
 var $tmp = $("#Car1Container").clone();
 $tmp.children().each(function(){
   var oldID = $("this").attr("id");
   var newId = oldId.substring(0,3)+index+oldId.substring(4);
   $(this).attr("id", newId);
 }
 $("#Car1Container").after($tmp);
}

Upvotes: 0

Iljaas
Iljaas

Reputation: 520

I think the jquery clone function would be useful for this.

Upvotes: 0

nillls
nillls

Reputation: 623

The jQuery Clone() will do this rather nicely. Granted, it won't increase the ID's, but I'm not convinced it needs to. Just name the fields CarYear, CarMake etc. When the values are posted to the server, if you've duplicated three of the div's, they'll be comma-separated. If necessary, you could iterate through the items and change the id's manually.

Upvotes: 0

Related Questions