mootools: new Element() - won't work in IE

I'm trying to create a bunch of elements and inserting them into a table. In FF and Chrome my code works fine, but in IE nothing happens when i push the "insert row" button. No errors or anything :\

I've stripped down my code to a simple example to try to find what I'm doing wrong.

function insert_row(){
    //get table element
    var filterTable = $('table_search_filter');

    //create new objects
    var tr = new Element('tr');
    var td1 = new Element('td');
    var td2 = new Element('td');        
    var td3 = new Element('td');
    var select_proje开发者_StackOverflow中文版ct = new Element('select', {'id':'select_secondary_' + filterCounter});


    //add elements to table
    td2.grab(select_project);
    tr.grab(td1);   
    tr.grab(td2);   
    tr.grab(td3); 
    filterTable.grab(tr);
}

When i write out my tr elements innerHTML i get different results in FF and IE:

FF - <td></td><td><select id="select_secondary_0"></select></td><td></td>

IE - <TD></TD><TD><SELECT id=select_secondary_0></SELECT></TD><TD></TD>

So it looks like IE handles it differently. First off, the tags are in upper case which is not good. Secondly, my id is without ' characters. Why? I'm really confused now, long day :\

I recall an issue w/ certain versions of IE that wouldn't dynamically create table elements if you didn't have tbody/thead elements in your table.

This may be a bug in mootools. After playing around with it, I was able to produce a script that DOES work - note I simply added a tbody tag to the table, and placed the id property on that instead of the table. The code now works as expected. This isn't an "answer" per-se, but it might be a viable work-around for you.

JSFiddle: http://jsfiddle.net/Brvyn/

<script type="text/javascript">
function insertRow() {
    //get table element
    var filterTable = $('table_search_filter');

    //create new objects
    var tr = new Element('tr');
    var td1 = new Element('td');
    td1.innerHTML = "first column";
    var td2 = new Element('td');      
    var td3 = new Element('td');
    td3.innerHTML = "third column";
    var select_project = new Element('select', {'id':'select_secondary'});


    //add elements to table
    select_project.inject(td2);
    td1.inject(tr);   
    td2.inject(tr);   
    td3.inject(tr); 
    tr.inject(filterTable);
    return false;

}
</script>

<a href="#" onclick="return insertRow();">Fire</a>

<br /> Table:

<table>
    <tbody id="table_search_filter"></tbody>    
</table>

On a related note, we just debugged a script that uses Mootools v1.1 (don't ask) - and IE9 seemed to have issues was the following syntax:

var select_project = new Element('select', {'id':'select_secondary'});

But re-written like so:

var select_project = new Element('select');
select_project.setAttribute('id', 'select_secondary');

...it worked fine. No idea why that is - but I thought this observation may be useful to someone.

P.S. I'm guessing this bug may have been fixed in a later version of Mootools.