Append partial html code jquery

Question

I am building an html page and I need to add html code from one div to another dinamically.

This is my first div:

<div id="placeHolder" style="display:none">
    <div id="1">....</div>
    <div id="2">....</div>  
    <div id="3">....</div>      
</div>

And I want to add the divs with the id 1, 2 and 3 to another div(#mainDiv) but not all at once.

Is there a way to add partial html code with jquery ? I know theres a function called append but what I dont know if it is suitable for this type of ocasion..

Thanks

Answer 1

I found an answer to this question by searching stackoverflow. I guess you are looking for the appendTo function like explained here. So, yes, you are right, appendTo is a good solution I think :-)

Answer 2

Say for instance you want to move them from the second div to the first:

<div id="newPlace">
</div>

<div id="placeHolder">
  <div id="1">....</div>
  <div id="2">....</div>
  <div id="3">....</div>
</div>

Then you can select elements with jQuery, copy them to the other place with append, and remove them from there original place:

$("#placeHolder div").appendTo("#newPlace").remove();

Answer 3

You can try this:

<div id="placeHolder" style="display:none">
    <div id="1" onclick="change(this)">....</div>
    <div id="2" onclick="change(this)">....</div>  
    <div id="3" onclick="change(this)">....</div>      
</div>

Javascript:

function change(element) {
    if ($(element).attr('id') === 1) {
        $('#mainDiv').append($(element).html());
    } ...
    // AND THE SAME FOR EACH DIV. IF YOU DON'T HAVE TOO MUCH, THIS CAN BE A WAY
}

With an onclick on your divs or whatever event you want to use to trigger this, you can use this function to change the content of your mainDiv depending on which element is selected, identified by id property.

If you are setting your divs data without any event throwed in your divs, you just have to add the function that I posted where you want to use it. Like here:

$(function() {
    //SOME STUFF
    $('#mainDiv').append($('#1').html()); //OR
    $('#mainDiv').append($('#2').html()); //OR
    $('#mainDiv').append($('#3').html());
});

Answer 4

Not sure if that is what you mean by adding html cod once at a time ...

Lets say you have a new div to add html code:

<div id="placeHolder" style="display:none">
    <div id="1">....</div>
    <div id="2">....</div>  
    <div id="3">....</div>      
</div>

<div class="result"></div>

you can do this:

$(document).ready(function (){
  $('#placeHolder').children().each(function (){
    $('.result').append(this);
    // do some other things
  });
});

Using children() to extract all the children div in the target div, and each() to literate through them.

http://jsfiddle.net/nvQG8/1/

Answer 5

assuming this is what you want

use append()

try this

$(function(){
  $('#mainDiv').append($('#1')); //to append div with id 1
  $('#mainDiv').append($('#2'));

});

fiddle here

Answer 6

Just store it in a string var and append it after your loop.