FoxyFish
FoxyFish

Reputation: 892

jQuery append() div tag not working as expected

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

Answers (5)

Pank
Pank

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

Muhammad Bekette
Muhammad Bekette

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

gabitzish
gabitzish

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

tymeJV
tymeJV

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

moonwave99
moonwave99

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

Related Questions