Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Moving a DOM element with append()?

I have a div element like

<div id="move">Something</div>

...that I'd like to move from one position to another in the DOM. Can I do this with appendTo(), like so:

$('#move').fadeOut(500, function() {
   $(this).appendTo('#another-container').fadeIn(500);
});

...or will this duplicate it?

If it's being duplicated, there would be two elements with the same id in the DOM. How could I avoid this?

like image 226
bobsoap Avatar asked Nov 24 '11 20:11

bobsoap


People also ask

How do you move an element from one element to another?

All you have to do is select the element(s) you want to move, then call an “adding” method such as append() , appendTo() or prepend() to add the selected elements to another parent element. jQuery automatically realises that the element(s) to add already exist in the page, and it moves the element(s) to the new parent.

How do I move a div to another div?

Answer: Use the jQuery . appendTo() Method You can use the jQuery . appendTo() method to move an element into another element.

Can you appendChild to a div?

Use appendChild to Append Data to Div in JavaScript Like the previous method, we first select the div by using one of the selectors. But instead of innerHTML , we use appendChild because of the problems discussed in the previous method. Before appending a child, we have to create the text node.


1 Answers

I took it directly from jQuery documentation http://api.jquery.com/append/

$( ".container" ).append( $( "h2" ) );

"If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):"

like image 156
jgasiorowski Avatar answered Oct 12 '22 18:10

jgasiorowski