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

what have you done so far? Some event/ code example would be helpful — Alex, May 27 '13 at 15:17
I just know that if I do $('#mainDiv').append('#placeHolder').html()); it will grab all the divs and put them inside the mainDiv.. — Akash, May 27 '13 at 15:20

score 3 · Accepted Answer · edited May 23 '17 at 12:01

3

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 :-)

edited May 23 '17 at 12:01

Community

1
1

answered May 27 '13 at 15:19

Dustin Klein

319
2
9

score 1 · Answer 2 · edited Jun 09 '14 at 21:49

1

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();

edited Jun 09 '14 at 21:49

user3723637

130
8

answered May 27 '13 at 15:21

Noctua

5,058
1
18
23

DaGLiMiOuX · Answer 3 · 2013-05-27T15:25:55.413

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());
});

bipen · Answer 4 · 2013-05-27T15:46:19.723

0

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

edited May 27 '13 at 15:46

answered May 27 '13 at 15:23

bipen

36,319
9
49
62

why append().html() ? what is the html() useful vor? – Alex May 27 '13 at 15:23

score 0 · Answer 5 · answered May 27 '13 at 15:40

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/

score 0 · Answer 6 · answered Jan 05 '16 at 16:33

0

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

answered Jan 05 '16 at 16:33

Gene Kelly

189
9

Append partial html code jquery

6 Answers6