CODEWITHSUNDEEP
javascriptjquery
Suffii
Suffii

Reputation: 5784

Issue on Loading a Div entire content to New Div

Can you please take a look at this demo and let me know why I am not able to load the #source div into #target div?

<div id="source">
    <div class="source-inn"><a>A</a></div>
    <div class="source-inn"><p>B</p></div>
    <div class="source-inn"><span>C</span></div>
</div>

<div id="target"></div>
<script> 
$( "#source" ).load( "#target" );
</script>

Upvotes: 2

Views: 40

Answers (2)

Giannis Grivas
Giannis Grivas

Reputation: 3412

There is no need to use .load() here because that is to load data from the server and place the returned HTML into the matched element (doc for .load is here).

I Suggest to use .append() for .children() elements like that :

http://jsfiddle.net/csdtesting/rc9kgekc/

$('#target').append($('#source').children());

The DOM result after that will be:

<div id="source">

<div id="target">
    <div class="source-inn"><a>A</a></div>
    <div class="source-inn"><p>B</p></div>
    <div class="source-inn"><span>C</span></div>
</div>
</div>

BUT, if you want DOM result to be like that:

<div id="target">
    <div id="source">
         <div class="source-inn"><a>A</a></div>
         <div class="source-inn"><p>B</p></div>
         <div class="source-inn"><span>C</span></div>
    </div>
</div>

Then, you will use it without .children() as bellow: http://jsfiddle.net/csdtesting/aywww7r7/

  $('#target').append($('#source'));

Hope this helps!

Upvotes: 2

pherris
pherris

Reputation: 17733

You want to append the div to the source like this:

$( "#source" ).append( $("#target") );

note that the css won't apply to the target since the target div doesnt have the same class.

Upvotes: 0

Related Questions