How to move an element into another element

Document fragments – the unsung heroes

Are you the efficient kind aiming to shift multiple elements? JS DocumentFragment is your best friend:

let elves = document.createDocumentFragment();
elves.appendChild(document.getElementById('elf1'));
elves.appendChild(document.getElementById('elf2'));
document.getElementById('santa').appendChild(elves);


Our dear little DocumentFragment is that invisible container, holding and humbly moving our elves into the Santa div, without causing page reflow for each insertion. Efficiency redefined!

jQuery – making life easy

For the jQuery aficionados, we present .appendTo():

// jQuery's arcade crane game; takes 'candy' and drops into 'bucket'
$('#candy').appendTo('#bucket');


If you prefer the top bunk, .prependTo() is on your side:

// School line leader - 'candy' takes front position in line aka 'bucket'
$('#candy').prependTo('#bucket');


To safeguard data and event handlers on your elements, employ jQuery's detach(), especially in dynamic web applications.

Uniqueness is key

In this DOMinion, maintaining unique ID attributes is non-negotiable in line with HTML standards. When cloning elements, revise their ID attributes:

// Making an identical twin for 'candy'; let's not create an identity crisis
let clonedCandy = $('#candy').clone().prop('id', 'candyClone').appendTo('#bucket');


Exploring more – insertBefore and insertAfter

Welcome to the world of extra controls over positioning with insertBefore() and .insertAfter():

// Native JavaScript
const sibling = document.getElementById('siblingNode');
parentNode.insertBefore(newNode, sibling);

// jQuery
$('#newNode').insertAfter('#siblingNode');


Keeping data and events intact

A concern when moving elements is not to sever their bound event handlers or associated data:

// Remember the coin trick? Here's the CSS version, 'coin' isn't really vanished!
let movedCoin = $('#coin').detach();
$('#magicBox').append(movedCoin);


This tricksy maneuver keeps our event handlers fully operational, without any extra lifting.

Performance considerations

For a smooth performance, especially during heavy DOM manipulation, avoid causing a repaint party. Batch your operations and update the DOM only once:

let bagOfTricks= document.createDocumentFragment();

bagOfTricks.appendChild(trick1);
bagOfTricks.appendChild(trick2);

document.getElementById('magicBox').appendChild(bagOfTricks);


This enforces a high-performance impact, critical for responsive user interfaces.