Reputation: 892
i'm having a problem with my append div. here is a rough idea of my 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 my jquery script is this:
var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('#appenddiv').append(htmloutput);
All works fine with the script and it fires when it should etc.. but my problem is, instead of placing the new html inside the div tags, it just adds it to the top of the table?
any idea why?
Upvotes: 1
Views: 2641
Reputation: 14258
I think no need to assign a variable, you can put html code directly to after() method.
Below is the script:
$('table tr:first').after("<tr><td>title added</td><td>subject added</td></tr>");
Above script will always add new row after the first row.
Upvotes: 0
Reputation: 1434
you can only append div inside a <td>
if you want to have a div in a table otherwise you cannot just add <div>
inside <table>
Upvotes: 0
Reputation: 9691
Your html structure is not valid. You shouldn't place a div
between tr's
. You should place it inside a td
if you want it inside your table.
If you want to add another row to your table, you should place a tr
instead of your div
element, and append it's content, or you should use jQuery .after()
or .before()
to position your element at a specific position.
Upvotes: 0
Reputation: 104775
As moonwave99 said, you can't have a <div>
as a direct child of your table element. If you always to add after the first row, you can do:
var output = "<tr><td>title added</td><td>subject added</td></tr>";
$('table tr:first').after(output);
Upvotes: 3
Reputation: 22817
You can't have a <div>
as a direct child of a <table>
element, so it's rendered outside of it.
Upvotes: 1