Quick tip about using appendChild() and insertBefore()

append-child.js

// When using appendChild() or insertBefore() on an element that's already been added to the document, the element will be removed from its place and put into the new place
var b1 = document.querySelector('.box1'),
  b2 = document.querySelector('.box2'),
  el = document.createElement('div'),
  t;

b1.appendChild(el);
t = window.setTimeout(function () {
  b2.appendChild(el);
  clearTimeout(t);
}, 3000); // setTimeout() with a 3s delay
// We can easily see the div inserted into box1, then after the specified delay inserted again into box2
// This way we can see that even though the div is inserted twice, it's still one element

box.css

.box1 div,
.box2 div {
  height: 100px;
  width: 100px;
}
/* Background colors visually differentiate between a div inserted into box1 compared to a div inserted into box2 */
.box1 div {
  background: #c00;
}
.box2 div {
  background: #ffa500;
}

index.htm

<div class="box1"></div>
<div class="box2"></div>