Geek asks and answers

JQuery, how to add one element already in HTML to another element?

I want to get one element that is already on the page in HTML, and add the element to another div or element in HTML.

I do not want to add a line, but I used

$("#dialog-form-Member").append($("div#MemberFormWrapper"));

Which took my element and placed it where I wanted it to, BUT he also got rid of the first element visually to put it in another different element

Example:

<div id="one">
     I want to put this div into div 2 without div one disappearing. Keep both divs visible at the same time.
</div>

<div id="two">
     I want div one content to show here and keep both divs visible.
</div>

If anyone has any suggestions, please let me know, thanks.

+3
source share
5 answers

I believe you are looking for clone ()

+4
source

You need to clone the item before adding in order to keep the original.

 $("#dialog-form-Member").append($("div#MemberFormWrapper").clone());

/ , clone @http://api.jquery.com/clone/

http://api.jquery.com/clone/:

: .

​​

: 1.0.clone([ withDataAndEvents]) withDataAndEventsA . jQuery 1.4, .

​​

: 1.5.clone([ withDataAndEvents], [ deepWithDataAndEvents]) withDataAndEventsA . - false. * 1.5.0 . false 1.5.1 .

deepWithDataAndEventsA Boolean , . ( false).

+4

, HTML.

$("#two").append($("#one").html());

:

<div id="one">
     I want to put this div into div 2 without div one disappearing. Keep both divs visible at the same time.
</div>

<div id="two">
     I want div one content to show here and keep both divs visible.  I want to put this div into div 2 without div one disappearing. Keep both divs visible at the same time.
</div>

Or, as the other answers indicate, you can use clone(), but be careful, as this will make 2 elements with an identifier oneand that is the problem.

$("#two").append($("#one").clone());

Outputs:

<div id="one">
     I want to put this div into div 2 without div one disappearing. Keep both divs visible at the same time.
</div>

<div id="two">
     I want div one content to show here and keep both divs visible.
     <div id="one">
         I want to put this div into div 2 without div one disappearing. Keep both divs visible at the same time.
     </div>
</div>

Please note that there are 2 elements one, you will need to change the ID of one of them.

$('#one', '#two').attr('id', 'three');
+3
source

clone element before adding.

$("#two").append($("div#one").clone());

Demo

0
source

make a full (deep) copy using .clone () and add it to the element you want to add to it.

$('div#MemberFormWrapper').clone().appendTo('#dialog-form-Membe');
0
source

More articles:


All Articles