Question

Seems like a super simple question but I can’t find an answer.

I’m grabbing a DIV “user-entry”

var $user = $('#user-entry');

HTML:

<div id="user-entry">

<table style="border: none; width: 100%">
            <thead>
                <tr>
                    <th colspan="2" style="text-align: left">
                        @Html.Label("Hello World")
                    </th>
                </tr>
            </thead>
    </table>
</div>

Now I want to append this to another div <div id="role"></div>.
That’s what JQuery append(), appendTo(), prepend(), prependTo() functions are for. Great!

My problem is that when used the DIV is being added without the actuall DIV name.
If example run:

            var $user= $('#user-entry');
            $($user.html()).appendTo('#role');

Then my table is being properly appended to the “role” but the user DIV itself doesn’t show.

Instead of:

<div id="role">
   <div id="user-entry">
      <table style="border: none; width: 100%">
     </table>
   </div>
</div>

I end up with:

<div id="role">
      <table style="border: none; width: 100%">
     </table>
</div>

How can I capture and return a div with its name Included ?

Answer 1

This is the correct way to do it

$('#user-entry').appendTo('#role');

$($user.html()).appendTo('#role'); creates a copy of the elements inside <div id="user-entry"> and appends them to <div id="role">