html - Appending into existing table with jQuery -

html - Appending <tr> into existing table with jQuery -

i seek insert new row in table, dont know why insert additional < td> don't itemize.

my table looks like

<table> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> </tr> </thead> <tbody> <tr id="test"> <td>a1</td> <td>a2</td> <td>a3</td> </tr> <tr> <td>c1</td> <td>c2</td> <td>c3</td> </tr> </tbody> </table>

and want add together new row after #test

var row = '<tr>' + '<td>b1<td>' + '<td>b2<td>' + '<td>b3<td>' + '</tr>'; $('#test').after(row);

but result get

<tbody> <tr id="test"> <td>... </tr> <tr> <td>b1</td> <td></td> <td>b2</td> <td></td> <td>b3</td> <td></td> </tr> <tr>...

i dont know why place additional < td> in table, know why doesn't work or error is?

i have create fiddle. maybe help understand problem.

thanks in advance

you're not closed td seek replace code:-

var row = '<tr style="background: yellow">' + '<td style="background: red">b1</td>' + '<td style="background: green">b2</td>' + '<td style="background: blue">b3</td>' + '</tr>';

demo

jquery html