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

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);
        });

Answer 2

It appears you're appending a single TR to a div, which may be your problem. You should append it to the TBODY of a TABLE instead.

Answer 3

Questions are:

• Do you have $counter defined?
• Do you have $countonlyadd defined?
• Do you have <table> wrapper in #buttondiv ?

Think about these questions and if result is "no", that's the problem

If you have <table> wrapper, change

$('#buttondiv').

to

$('#buttondiv table').

Answer 4

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 5

Maybe it helps if you create the elements first..so create an object for your row, column, textbox, etc. And than append that into each other. Finally append the row to your div. Besides that, it is a bit weird to add a row to a div, and not to a table...