jQuery's append doesn't append but removes
<p>I have a table like this:</p>

<pre><code>&lt;table id="invrows"&gt;
    &lt;tbody&gt;
        &lt;tr id="rowrow"&gt;
            &lt;td&gt;&lt;input type="text" id="idef" name="idef[]" class="required"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="iprice" name="iprice[]" class="required"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" id="ivat" name="ivat[]" class="required"&gt;&lt;/td&gt;
            &lt;td&gt;&lt;div id="addrow"&gt;Add One More&lt;/div&gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>And want to ADD a new row to the table each time the "addrow" div is clicked.
So this is my jQuery code:</p>

<pre><code>$('#addrow').click(function(){
        $('#invrows tr:last').append($('#rowrow'));
});
</code></pre>

<p>However, instead of adding a new '#rowrow' row (sounds rediculous, I know), it just removes this one row, and thus leaving me with an empty table.
I tried adding the HTML code for the row to .append(), and this works just fine, but I want it to work with the DOM element, so that when the original row changes, nothing is broken, and the jQuery code itself doesn't need editing.
All help appreciated!</p>
