CODEWITHSUNDEEP
javascriptjquery
InspiredBy
InspiredBy

Reputation: 4320

How to grab and return a Div with its Id included

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 ?

Upvotes: 1

Views: 82

Answers (3)

Ram
Ram

Reputation: 144669

because by using html method you are only appending the contents of the div, try this:

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

DEMO

Upvotes: 3

Petah
Petah

Reputation: 46050

Try:

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

Or if you want to clone it try:

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

Upvotes: 1

Musa
Musa

Reputation: 97672

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">

Upvotes: 3

Related Questions