javascript - Row added twice to table with jQuery -

i want create table jquery. code this:

function showgrid(url, container, columns, page) {     jquery(container).empty();      var tr = jquery("<tr class=\"mobilegridheader\"><tr>");      var tdtotalrows = jquery("<td>test</td>");     jquery(tr).append(tdtotalrows);      var table = jquery('<table class="mobilegrid"></table>');     jquery(table).append(tr);      jquery(container).append(table); } 

the container div on page. problem is, tr added twice container , not know why.

it not browser error, in html can see code twice.

<table class="mobilegrid">    <tbody>        <tr class="mobilegridheader">            <td>test</td>        </tr>        <tr>            <td>test</td>        </tr>    </tbody> </table> 

the weird also, css class "mobilegridheader" added in first row.

you not close tr tag in creation 2 elements created. fix issue instead of line:

var tr = jquery("<tr class=\"mobilegridheader\"><tr>"); 

use line (backslash added):

var tr = jquery("<tr class=\"mobilegridheader\"></tr>");