Jquery append a div area

Question

Hi I want to add a new line in a table every time a button is clicked in my code, The code below works but I am expecting it inside the DIV tag called 'selector' as an addition to my table but instead it appears at the top of the page, What am i doing wrong please ? thanks

        <script type="text/javascript">
            $(document).ready(function(){
              $("#test").click(function() { tested(this) }); 
            });


            function tested() {

            newline = "<tr bgcolor='#666666'><td>&nbsp;</td>  <td><input type='button' id='test1'  value='Click to Test' /></td><td>&nbsp;</td>  </tr> " ;

            $('#selector').append(newline)
            }

        </script> 

            <table width="500" border="1" cellspacing="1" cellpadding="1" bgcolor="#CCCCCC" align="center">
              <tr>
                <td width="50">top</td>
                <td>&nbsp;</td>
                <td width="50">&nbsp;</td>
              </tr>

             <div id='selector' > 
              <tr bgcolor="#666666">
              <td>&nbsp;</td>
              <td><input type="button" id="test"  value="Click to Test" /></td>
              <td>&nbsp;</td>
              </tr>
              </div>

              <tr>
                <td>Bottom</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
              </tr>

            </table>

            </body>
            </html>

Answer 1

Your code is not valid html - and this is bound to cause unexpected behaviour in different browsers.

You cannot include a div tag as a direct child of a table - use a tbody for this purpose intead:

<table width="500" border="1" cellspacing="1" cellpadding="1" bgcolor="#CCCCCC" align="center">
    <thead>
          <tr>
            ...
          </tr>
    </thead>
    <tbody id='selector' > 
          ...
    </tbody>
</table>