Jquery append a div area
<p>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 </p>

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


            function tested() {

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

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

        &lt;/script&gt; 

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

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

              &lt;tr&gt;
                &lt;td&gt;Bottom&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;

            &lt;/table&gt;

            &lt;/body&gt;
            &lt;/html&gt;
</code></pre>
