problem in using appendchild in IE7

Question

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

Answer 1

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.