Moving a div from inside one div to another div using Prototype?
Solution 1
You can add this at the very end of the BODY tag:
<script>
document.getElementById('there').appendChild(
document.getElementById('MacGuffin')
);
</script>
MacGuffin
will be moved automatically from one to the other.
And there won't be any flickering.
Solution 2
Perhaps not a major point, but there is no Node.migrateChild() built-in Javascript interface method. If a fragment already has a parent elsewhere in the DOM (as div id='MacGuffin' does in example markup above), appendChild() quietly detaches the argument fragment from any current parent before reattaching under the new parent. In my mind migrateChild() would be a more semantically meaningful method name than appendChild(), less need for StackOverflow developer searches to allude to its more powerful abilities.
Solution 3
To move the contents of here
into there
, this works, as long as here
encloses everything you want to move, like a <div>
:
$('there').insert($('here').descendants()[0]);
descendants() returns an array, and insert takes content, so use the first element.
Related videos on Youtube
Comments
-
ʍǝɥʇɐɯ over 4 years
In prototype or normal-but-cross-browser-compatible Javascript, how do I move the contents of a div to the contents of another div?
Inside the div is a form with ids and dependent Javascript code with event observers. I don't want this to break just because I have moved a block in the DOM. A 'this innerHTML = that innerHTML' solution is not what I am looking for. I will also be needing to do this when the DOM is loaded.
I want to go from this:
<div id='here'> <div id='MacGuffin'> <p>Hello Worlds!</p> </div> </div> <div id='there'> </div>
to this:
<div id='here'> </div> <div id='there'> <div id='MacGuffin'> <p>Hello Worlds!</p> </div> </div>
...when the document loads with nothing jumping about.
-
ʍǝɥʇɐɯ about 13 yearsThanks for looking into that for me. I wasn't able to use the shorthand $ but @Mic's suggestion worked fine. I was able to use Prototype for running the move on DOM load but I was surprised there was no Prototype solution.
-
ʍǝɥʇɐɯ about 13 yearsThankyou very much. Worked nicely although I did not go for the BODY tag, I went for the prototype on DOM load method.
-
Mic about 13 yearsGlad it worked. I don't know well prototype, but if I remember well
$('there').appendChild( $('MacGuffin') )
could work too. -
Martin T. about 5 yearsYou may choose to write the code inside an window.onload = function(){document.getElement...}, than you can place it right beside the 'there' object. Not at the end of BODY. With this trick I was able to place a banner loaded in the dynamic top of the page to the static bottom of my page.
-
Emma Earl Kent over 3 yearsThis works but seems overly complicated. I believe the answer by @Jim works better.