HTML tags break javascript

[jooost]

Hello,

I have a quick question that I cannot for the life of me figure out.

The following is my java code to extend a form:


<script type="text/javascript">
var counter = 0;
function add_event() {
counter++;
var newFields = document.getElementById('add_event').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('add_event');
insertHere.parentNode.insertBefore(newFields,insertHere);
}
</script>


The script essentially acts on this sample of html:


<li>
<label for="title">Title: </label><input type="text" name="title" value="" />
</li>
<li>
<label for="time">Time: </label><input type="text" name="time" value="" />
</li>


Everything works fine except for the counter/adding on to theName ( newField[i].name = theName + counter).

I know exactly what the problem is... I just don't know how to fix it. If I remove the li tags, the counter will work fine and increment each "name". As soon as I put the li (see code above) tags back (or any html tag - I have tested others as well) - it breaks again and won't increment the name - it just submits the names without numbers and alas I have no usable post data.

Does anyone have any clue how to keep the html formatting there and still get the counter to increment the name?

[dlorde]

JFYI - Javascript is not Java.

It is better to have an approximate answer to the right question than an exact answer to the wrong one...
J. Tukey

[jooost]

Even more proof that I don't know much about java :)