Javascript createElement() method different in IE and Mozilla

I got caught out the other day while making a small web thingy for my daughter. She is learning to recognise 12 words by sight at kindy. So she would not rote learn the words by their position on the piece of paper I whipped up a quick web page that would jumble them up for her. I also recorded her speaking the words so she could click on each word to verify she was pronouncing it correctly.

Anyway, It worked great in Firefox. Not so great in Internet Explorer. It took me a while to figure it out. Eventually it came down to different implementations of the createElement() method.

IE:
var newCell = document.createElement("<td onmouseover=\"this.className='cell_over';\" onmouseout=\"this.className='cell_out';\" onClick=\"play(this)\"></td>");

FireFox:
var newCell = document.createElement("td");
newCell.setAttribute("onmouseover","this.className='cell_over';");
newCell.setAttribute("onmouseout","this.className='cell_out';");
newCell.setAttribute("onClick","play(this)");

Thanks to the byteclub crew I have my sanity back.

Leave a Reply

Your email address will not be published. Required fields are marked *