Form elements cloning

Hi!

I've been trying to set up a form elements cloning script based on the article in the following link : http://www.quirksmode.org/dom/domform.html.

The problem seems to be the quirky functioning of the script since I can't get it to work properly in Firefox or IE7. In both cases i can only remove form elements.

Any suggestion?

The script:



var counter = 0;

function init() {
document.getElementById('moreFields').onclick = moreFields;
moreFields();
}

function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
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);
}
window.onload = moreFields;



HTML:
<div id="readroot" style="display: none">
<input type="button" value="Remove review"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
<br />
<br />

<input name="cd" value="title" />

<select name="rankingsel">
<option>Rating</option>
<option value="excellent">Excellent</option>
<option value="good">Good</option>
<option value="ok">OK</option>
<option value="poor">Poor</option>
<option value="bad">Bad</option>
</select>
<br />
<br />

<textarea rows="5" cols="20" name="review">Short review</textarea>

</div>

<form method="post" action="process_form.html.php">

<span id="writeroot"></span>

<input type="button" id="moreFields" value="Give me more fields!" />
<input type="submit" value="Send form" />

</form>

1. i don't any node creation happening here.
2. the button has no childNodes, it's a singleton.

if you want more buttons, try something like this:

function newElm(type, lab){ return document.createElement(type); }
var insertHere = document.getElementById('writeroot');
var newFields = document.getElementById('readroot');

var baseName=newFields.name;
for(i=0;i<10;i++){
tElm=newElm("button");
tElm.style.display = 'block';
tElm.name=baseName+i;
insertHere.appendChild(tElm);
}//next