javascript - jQuery append() div tag not working as expected -

i'm having problem append div. here rough idea of html

<table> <tr> <td>title 1</td> <td>subject 2</td> </tr> <div id='appenddiv'></div> <tr> <td>title 2</td> <td>subject 2</td> </tr> </table> 

and jquery script this:

var output = "<tr><td>title added</td><td>subject added</td></tr>"; $('#appenddiv').append(htmloutput); 

all works fine script , fires when should etc.. problem is, instead of placing new html inside div tags, adds top of table?

any idea why?

as moonwave99 said, can't have <div> direct child of table element. if add after first row, can do:

var output = "<tr><td>title added</td><td>subject added</td></tr>"; $('table tr:first').after(output);