Jquery - Add new row to table (IE friendly version)

Question

Im' having problems with JQuery and Internet Explore (IE). My method for adding rows doesn't seem to be working in IE (Chrome & Firefox pose no problem)

Imagine 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 rows (when the user clicks a 'button') i perform 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 alter my method so it works in IE too? (e. g. the row is being added)?

Note: i'm using the following JQuery - library

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

Answer 1

Remove the traling space in your opening <tr> tag, IE doesn't like invalid HTML (no joke!!). ;-)

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

Answer 2

I also came across the same problem few months back and followed the below approach

Create the elements as separate elements instead:

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