appendChild not working in IE6 or 7

[rondog]

I am having a problem getting appendChild to work in IE6 and 7.

 

It works fine in firefox, chrome, safari and surprisingly IE8, but not 6 or 7

var odd = true;
function generatePlaylist(name,album,artist,source,thumbnail)
{
var parent = document.getElementById("player-playlist");
var el = document.createElement('span');
if (odd)
{
	el.setAttribute('class','aSong odd');
	odd = false;
}
else
{
	el.setAttribute('class','aSong');
	odd = true
}

el.setAttribute('data-name',name.replace(/'/g,''));
el.setAttribute('data-album',album.replace(/'/g,''));
el.setAttribute('data-artist',artist.replace(/'/g,''));
el.setAttribute('data-source',source.replace(/'/g,''));
el.setAttribute('data-thumbnail',thumbnail.replace(/'/g,''));
el.setAttribute('onclick','test(this)');

el.innerHTML = name.replace(/'/g,'');
parent.appendChild(el);
//console.log(name + "\n" + album + "\n"  + artist + "\n" + source + "\n" + thumbnail);
}

function test(who)
{
alert(who.getAttribute('data-source'));
}

 

any ideas?

[rondog]

rather than using setAttribute I just concatonated the string which seems to work.

var odd = true;
var appendMe = "";

function generatePlaylist(name,album,artist,source,thumbnail)
{
var parent = document.getElementById("player-playlist");
if (odd)
{
	appendMe += "<span class='aSong odd' data-name='" + name.replace(/'/g,'') + "' data-album='" + album.replace(/'/g,'') + "' data-artist='" + artist.replace(/'/g,'') + "' data-source='" + source.replace(/'/g,'') + "' data-thumbnail='" + thumbnail.replace(/'/g,'') + "' onclick='test(this)'>" + name.replace(/'/g,'') + "</span>";
	odd = false;
}
else
{
	appendMe += "<span class='aSong' data-name='" + name.replace(/'/g,'') + "' data-album='" + album.replace(/'/g,'') + "' data-artist='" + artist.replace(/'/g,'') + "' data-source='" + source.replace(/'/g,'') + "' data-thumbnail='" + thumbnail.replace(/'/g,'') + "' onclick='test(this)'>" + name.replace(/'/g,'') + "</span>";
	odd = true
}
parent.innerHTML = appendMe;
}

function test(who)
{
alert(who.getAttribute('data-source'));
}

 

I am still looking for the answer if anyone knows..

[Adam]

I imagine IE6/7 are trying to use the parent property, as opposed to your defined variable. Just to be safe you should never name variables after any reserved keywords/properties.

[rondog]

the problem was using setAttribute with the onclick event. If I remove it, it works.

[Adam]

Ah yes of course. Technically events aren't actually attributes; in HTML you're just able to assign them like that. Try this:

 

el.onclick = function() {
    test(this);
}