problem in using appendchild in IE7

Find below the js function that I'm using to add a new date field & 'Select Venue' link to an existing div with id 'coursedates' . Problem is this 开发者_如何学运维works fine in FF 3 & IE 8.

It doesnt work in IE7. If I alert the count(length) of 'dts' it always says 1, though it IE developer toolbar shows that the new date div is added to coursedates. I tried using innerHtml instead of appendchild, but in that case, the listeners of the old coursedt div's elements like selven+new_course_dt_index are lost. Is there a solution for this.

Thanks in advance.

addnewcoursedate: function () {

var dts = yud.getElementsByClassName('coursedt', 'div', 'coursedates');
var new_course_dt_index = parseInt(dts[parseInt(dts.length, 10)-1].id.split('coursedt')[1],10)+1;
var newdt = document.createElement('div');
newdt.setAttribute('class','coursedt');
newdt.setAttribute('id','coursedt'+new_course_dt_index);

var coursedt_htm = 
"<div class='clearfix flt_left'><label for='coursestartdt"+new_course_dt_index+"'>Start Date & Time </label><a href='javascript:NewCssCal(\"coursestartdt"+new_course_dt_index+"\",\"ddmmyyyy\",\"arrow\",true,12,false);'><img src='calbtn.gif' width='16' height='16' border='0' alt='Pick a start date & time'></a><br/>"+
    "<input type='text' id='coursestartdt"+new_course_dt_index+"' name='coursestartdt"+new_course_dt_index+"' value=''> </div>"+
    "<div class='flt_left'><a href='#' class='selven' id='selven"+new_course_dt_index+"'>Select Venues</a><br/><input type='hidden' name='venues"+new_course_dt_index+"' id='venues"+new_course_dt_index+"'><div class='selvenue' id='venueshw"+new_course_dt_index+"'>&nbsp;</div></div>"+
    "<div class='flt_rght clr_lft'><a href='javascript:YAHOO.modname.event_js.removecoursedate(\""+new_course_dt_index+"\");'><img title=\"Remove date\" src=\"clear_field.gif\" /></a></div>";
newdt.innerHTML = coursedt_htm;

var crsdts = yud.get('coursedates');
crsdts.appendChild(newdt);

var newbr = document.createElement('br');
newbr.setAttribute('class','lstclr');
newbr.setAttribute('id','lstclr'+new_course_dt_index);

crsdts.appendChild(newbr);

if ( YAHOO.modname.event_js.ven_dlgs[new_course_dt_index] == null ) {
    YAHOO.modname.event_js.ven_dlgs[new_course_dt_index] = _createVenueDialog(new_course_dt_index);
}

},

note: yud : YAHOO.util.Dom

---

Found the problem. For some reason, IE7 was not recognising the class 'coursedt' added to the new div.

newdt.setAttribute('class','coursedt')

But it worked when I changed the code to the following :

var attr = document.createAttribute('class'); attr.value = 'coursedt'; newdt.setAttributeNode(attr);

This works for FF & IE 6,7,8.

---

I also found that this problem can happen when a function on one window tries to call appendChild on an element in another window, this means that both elements have to be on the same document (which is quite obvious), but at least IE should say something about this.