jQuery append not working in IE8

Question

 $('#buttonadd').click(function(){
            if ($counter < 10)
            {
                $counter++;
                $countonlyadd++;
                $('#buttondiv').append('<tr><td><select class="combo" name="combo'+$counter+'" style="width: 60px;" size="1"><option>UND</option><option>OHNE</option><option>ODER</option></select></td><td><input type="text" name="textbox'+$counter+'" class="textbox" value="" /><a id="removetxt" class="removetxt" style="text-decoration: none;line-height: 3;" href="#">&nbsp;[X]</a></td></tr>');
            }else{
            }
            $('#send_count').val($countonlyadd);
        });

My code is not working in Internet Explorer, and i dont know why. All other browsers are ok but IE is not. He is not adding even 1 textbox.

Answer 1

ya the problem is IE compatibility mode. This works fine in IE9 http://jsfiddle.net/NP9pG/3/ and firefox but when you switch to IE compatibility mode it doesn't work.

<div id="buttondiv">  </div>
<div id="send_count"></div>
<input type="button" id="buttonadd" value="add" />

but this http://jsfiddle.net/NP9pG/4/ will work fine tho in IE compatibility mode

<table id="buttondiv">  </table>
<div id="send_count"></div>
<input type="button" id="buttonadd" value="add" />

ya the problem is your html mark-up as suggested make the following change

<div id="buttondiv">
  <table id="tableData"></table>
</div>

rather append items to table instead of div element

therefore js code:

$('#tableData').append('<tr><td><select class="combo" name="combo'+$counter+'"  style="width: 60px;"  size="1"><option>UND</option><option>OHNE</option><option>ODER</option></select></td><td><input  type="text" name="textbox'+$counter+'"  class="textbox" value="" /><a id="removetxt" class="removetxt"  style="text-decoration: none;line-height: 3;"  href="#">&nbsp;[X]</a></td></tr>');

hope that helps

Answer 2

Looks like you are adding a tr directly into which is not a valid html in any browser. Other browsers will not shout but IE will. Try this.

Working demo

Markup change

<div id="buttondiv">
   <table></table>
</div>

JS change

$('#buttonadd').click(function(){
            if ($counter < 10)
            {
                $counter++;
                $countonlyadd++;
                $('#buttondiv table').append('<tr><td><select class="combo" name="combo'+$counter+'" style="width: 60px;" size="1"><option>UND</option><option>OHNE</option><option>ODER</option></select></td><td><input type="text" name="textbox'+$counter+'" class="textbox" value="" /><a id="removetxt" class="removetxt" style="text-decoration: none;line-height: 3;" href="#">&nbsp;[X]</a></td></tr>');
            }else{
            }
            $('#send_count').val($countonlyadd);
        });