.appendTo() does not work in IE7

Question

I have updated my example

My case has two steps:

1) User will select the Number of modeled stages from a drop-down list. 2) Based on users input, I am using .appendTo method to create HTML tables on the fly.

Everything goes well on chrome, firefox, IE9 except IE7. A number of my users have IE7 and they are not allowed to update. So I have to fix this issue. Really appreciate any comments.

Another interesting thing is that I have used .appendTo() created another webpage, which works in IE7.

Here is an example of how it looks in Chrome and IE9

Below is my code:

HTML code:

<div class="articles">
<table align="center">
<tr><th><label for="id_S">Number of modeled stages:</label></th><td><select name="S" id="id_S">
<option value="">Please choose</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></td></tr>
</table></div>

JavaScript code:

$(".articles").find('table').addClass('table');

$('#id_S').change(function() {
    $('.leslie').remove();
    $('.no').remove();
    var total = $(this).val()
    $('<table class="leslie" border="0" align="center"><tr><th width="5" colspan=' + total + '>Lesile Matrix:</th></tr>').appendTo('.table');

    i = 0
    while (i < total) {
        $('<tr>').appendTo('.leslie')

        var j = 0
        while (j < total) {
            $('<td><input type="text" size="5" name="a' + i + '' + j + '" value="0" id="id_a' + i + '' + j + '"/></td>').appendTo('.leslie tr:last')
            j = j + 1
        }

        $('</tr>').appendTo('.leslie')
        i = i + 1
    }
    $('</table>').appendTo('.leslie');


    $('<table class="no" border="0" align="center"><tr><th width="5">Initial Number:</th></tr>').appendTo('.leslie');

    q = 0
    while (q < total) {
        $('<tr><td><input type="text" size="5" name="no' + q + '" value="0" id="id_a' + q + '"/></td></tr>').appendTo('.no')
        q = q + 1
    }
    $('</table>').appendTo('.no');

})​

Answer 1

You are not using DOM/jQuery correctly. The DOM (or jQuery which is a DOM wrapper with a mix of other stuff) cannot manipulate open and close tags separately, it can only manipulate them together. If you pass partial HTML into jQuery, it will use the DOM API to construct a DOM object. In your case, the IE7 DOM cannot figure out what your partial HTML means.

The following should work:

<script type="text/javascript" src=" ../stylesheets/jquery-1.7.2.js"></script> 
<script>
$('<table class="leslie" border="0" align="center"><tr><th width="5">Lesile Matrix:</th></tr></table>').appendTo('.table');         
$('<tr>').appendTo('.leslie');
$('<td><input type="text" size="5" name="a" value="0" id="id_a"/></td>').appendTo('.leslie tr:last');
</script>

The premise is that when you call $(...) with HTML, you should always pass in valid HTML.