Image

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: 


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(newFields,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?