Completely cut and paste an element

Question

Can I cut (completely, with all styles and attributes) an element from a location and paste it in another location (like body) with jQuery?

Also, I want to place a string (or tag) in the old location, because I want to change its place to old location at the end of the script.

Can I? How?

Ive never heard of anything like this but maybe create an event handler for a copy command, (plenty of examples on google, then just remove the inner html, you will have to save the inner html code somewhere first, before pasting it. Maybe in xml or other methods. May be the object can only be cut when a paste has already been chosen, then you could do it all in one function. Dont think its impossible thought heres how to detect copy and paste events http://www.mkyong.com/jquery/how-to-detect-copy-paste-and-cut-behavior-with-jquery/ — AlexMorley-Finch, Aug 25 '11 at 07:39
Note: Elegant solution to swap 2 neighboring items: http://stackoverflow.com/a/8638127/669677 — , May 09 '14 at 12:46

score 47 · Accepted Answer · answered Aug 25 '11 at 07:40

47

appendTo() will automatically move the matched elements from their current location to the specified container, which seems to be what you want.

You can use after() to insert new content before moving the element:

$("#yourElement").after("<p>Element was there</p>").appendTo("body");

answered Aug 25 '11 at 07:40

Frédéric Hamidi

258,201
41
486
479

+1 but if the CSS is applied like this though `.someContainer #yourElement { color: blue; }` taking it out of the container will "ruin" the style. So it might be more complicated. – Shadow The GPT Wizard Aug 25 '11 at 07:48
Thank you. i was using `appendTo()` but I didn't know it will move elements. – mrdaliri Aug 25 '11 at 07:48
@kikio, unfortunately, unless the new container also exposes the `someContainer` class, the styles will indeed change. To my knowledge, there's no easy way to compute and reapply the original styles. Maybe you can change the CSS rules so the appropriate styles will apply to the element regardless of its container? – Frédéric Hamidi Aug 25 '11 at 08:04
yes, "I" can, but i'm developing a plugin, maybe my users can't – mrdaliri Aug 25 '11 at 08:11

kamal pal · Answer 2 · 2015-08-05T07:03:33.127

26

.detach() is more appropriate for this task, as @lvan suggested.

jQuery(jQuery("#yourElement").detach()).appendTo("body");

edited Aug 05 '15 at 07:03

answered Aug 05 '15 at 06:54

kamal pal

4,187
5
25
40

score 8 · Answer 3 · edited Apr 15 '15 at 09:30

8

you can do it by clone first copy it to another location

$('#yourElement').clone().appendTo('#anotherDiv');

then remove old one,

 $('#parentOfOldElement #yourElement').remove();

or you can replace it to get it later

  $('#parentOfOldElement #yourElement').replaceWith('<div id="toReplaceAgain">/div>');

edited Apr 15 '15 at 09:30

Hugolpz

17,296
26
100
187

answered Aug 25 '11 at 07:37

Jayantha Lal Sirisena

21,216
11
71
92

Thank you. I'm newbie in jQuery, and didn't heard about `remove()` – mrdaliri Aug 25 '11 at 07:55
9

`.detach()` could be used instead of `clone()` and `remove()` – Ivan Ivanov Jul 17 '14 at 23:50

score 1 · Answer 4 · edited Jul 19 '21 at 12:06

1

insertAfter() and insertBefore() are exactly cut and paste methods.

edited Jul 19 '21 at 12:06

Tomerikoo

18,379
16
47
61

answered Jul 19 '21 at 12:04

David Muñoz

11
1

score 1 · Answer 5 · answered Sep 16 '21 at 11:06

1

unless or untill you are not cloning any element all operator will move the selected element from one location to other ex: appendChild , appendTo , insertAfter , insertBefore and so on

answered Sep 16 '21 at 11:06

Amir Rahman

1,076
1
6
15

Completely cut and paste an element

5 Answers5

Linked