Перемещение элементов DOM с помощью метода appendChild()

JavaScript позволяет перемещать элементы DOM с помощью метода appendChild().
В результате такого перемещения элемент автоматически вырезается из DOM и перемещается на новое место. Привязанные к элементу события при этом сохраняются.

Пример.

document.body.innerHTML = ''; // Очищаем страницу от лишних элементов.

var btn1 = document.createElement('button'); // Создаем 2 кнопки.
var btn2 = document.createElement('button');

btn1.style.width = '100px';
btn1.style.height = '100px';
btn1.id = 'one';

btn2.style.width = '100px';
btn2.style.height = '100px';
btn2.id = 'two';

var text1 = document.createTextNode('Button 1');
var text2 = document.createTextNode('Button 2');

btn1.appendChild(text1);
btn2.appendChild(text2);

btn1.addEventListener('click', function(){alert(1);}, false); // Привязываем к кнопкам события.
btn2.addEventListener('click', function(){alert(2);}, false);

document.body.appendChild(btn1); // Добавляем кнопки на страницу.
document.body.appendChild(btn2);

var buttonOne = document.getElementById('one');
document.body.appendChild(buttonOne); // Перемещаем первую кнопку. Ставим её после второй.