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_project = 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'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_project = 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 :\

• javascript
• html
• mootools

• 2 What version of IE are you working with? I am not able to replicate the described behavior. Also, by what means are you looking at the changes to DOM in IE? – Chris Baker Commented Feb 15, 2011 at 16:18
• 1 I'm testing it on IE 7. Im not quite sure what you mean with your second question though. I'm calling the function to add the row when user pushes a button with onclick="javascript:insert_rows();". Does that answer you second question? – Madoc Commented Feb 15, 2011 at 16:24
• 1 I've just tested on IE(8 and 7) and it's working. Tell me plz if this version is working => jsfiddle/steweb/AMjwt/1 Also, what mootools version r u using? ty – stecb Commented Feb 15, 2011 at 16:31
• 1 Although the html representation is different in IE, the end result of the DOM is identical in both FF and IE. Note the html representation can actually be different in all browsers, just not wrt casing as most browsers get at least that right. – Roatin Marth Commented Feb 15, 2011 at 16:35
• 1 This DOM elements do not display in IE6/7 i ran into this a couple years back. if i remember correctly it has to do with the order of injection w/ the created Elements. – KJYe.Name Commented Feb 15, 2011 at 16:40

3 Answers 3

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/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.