Append partial html code jquery

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

---

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

---

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

---

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

链接地址: http://www.djcxy.com/p/42554.html

上一篇: 如果元素被包含在另一个元素中，如何移动元素

下一篇: 追加部分html代码jquery