jQuery is deleting elements

Question

I've got a problem with jQuery. I need to copy some code, to append is somewhere else.

The source I like to take a copy from is like this:

<div id="copyCode" style="display: none">
    <div class="ofPagedataTable">
        <tr class="page copy">
            <td class="id"><input type="text" /></td>
            <td class="sprache"><input type="text" /></td>
            <td class="description"><input type="text" /></td>
            <td class="title"><input type="text" /></td>
            <td class="keywords"><input type="text" /></td>
        </tr>
    </div>
</div> 

The jQuery I'm using is like this:

$('.addPageToPagedata').click(function(){
    html = $("#copyCode").children(".ofPagedataTable").html();
    target = $('.pagedata tbody').children(':last');    
    $(html).appendTo(target);
    });

It's kind of working, but jQuery is taking away the <tr> and <td> Elements and it is appending just:

<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">

I'dont know what to do. It would be nice if someone can give me a suggestion how to solve this.

Thank you!

Answer 1

I don't think jQuery remove anything. You html is not valid. You can't put td and tr here. Your browser just remove this elements by itself.

Answer 2

try wrapping the tr in <table> tags, to make the html valid.