help with cloneNode script
I am trying to create a script that will add a new field when the user clicks on a link. I am using the cloneNode feature to take the existing field and make a new one based on that. This script works great in firefox on my mac, but fails on IE 6 in Windows.
The script:
And here is the HTML:
The script:
var counter = 0;
function addGiftCard()
{
counter++;
$('cardCount').value=counter;
var newFields = $('GiftCard').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
//alert("innerhtml = " + newFields.childNodes[1].innerHTML);
newFields.childNodes[1].id = "giftCardDesc" + (counter + 1 );
newFields.childNodes[1].innerHTML = "Gift Card " + (counter + 1) + " - Amount";
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++)
{
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFi elds,insertHere);
}
And here is the HTML:
<a href="#" onclick="addGiftCard();"> + Add Gift card</a><br />
<div id="GiftCard" >
<span id="giftCardDesc" class="text">Gift Card 1 - Amount</span>$<input class="formField required validate-currency-dollar" type="text" name="amount" value="50" size="6">
</div>
<div id="writeroot"></div>
<input type="hidden" value="1" id="cardCount" name="cardCount" />
Any ideas why this works on firefox and fails in IE? 