JQuery - add a new row to a table (version that supports IE)

Question

Im 'having problems with jQuery and Internet Explore (IE). My line-adding method doesn't seem to work in IE (Chrome and Firefox aren't a problem)

Present the following table

<table border="1"> <tr> <td><button class="btn">btn1a</button></td> <td><button class="btn">btn1b</button></td> <td>zever</td> <td>zeverin pakskes</td> </tr> <tr> <td><button class="btn">btn2a</button></td> <td><button class="btn">btn2b</button></td> <td>zever</td> <td>zeverin pakskes</td> </tr> </table> 

To add lines (when the user clicks on the 'button'), I execute the following method

 $(document).ready(function(){ $('.btn').on('click',function(){ var parentrow = $(this).parent().parent(); parentrow.after('<tr ><td colspan="4">Dit is een colspan rij</td></tr>'); }); }); 

Question: How can I change my method to work in IE as well? (for example, a string is added)?

Note: I am using the following jQuery library

 <script src="https://code.jquery.com/jquery.js"></script> 

Answer 1

Remove the friction space in the opening <tr> , IE doesn't like invalid HTML (don't joke !!); -)

 parentrow.after('<tr><td colspan="4">Dit is een colspan rij</td></tr>'); 

Answer 2

I also ran into the same problem a few months ago and followed the approach below.

Create elements as separate elements:

 parent.after($('<tr/>').append($('<td colspan="4" />').text('Dit is een colspan rij')));