[Diphenyl Oxalate]

Опять какая-то шизофрения.

Задача: сделать плагин explode (при клике элемент "разлетается" на части).
План:
- создать NxN ячеек с overflow=hidden (с этим проблем нет)
- поместить туда копии элемента (вот здесь проблема)
- сдвинуть маргинами, анимировать

Никак не могу поместить копии элемента в ячейки.

Если поставить var tileContent = elem.outerHTML; (восьмая строчка в коде), то оригинальный элемент чудесным образом не удаляется, а в ячейки не добавляются! Если же вместо outerHTML поставить innerHTML, то всё работает, но стили оригинального элемента теряются, чего допустить нельзя. cloneNode не помогает, эффект такой же, как с outerHTML.

function Explode( elem, num ) {
	num = num || 3; // num*num ячеек
	var pos = elem.getBoundingClientRect();
	var top = pos.top;
	var left = pos.left;
	var width = Math.round( elem.clientWidth / num );
	var height = Math.round( elem.clientHeight / num );
	var tileContent = elem.outerHTML;
	elem.parentNode.removeChild( elem );
	for ( var i = 0; i < num; i++ ) {
		for ( var j = 0; j < num; j++ ) {
			var tile = document.createElement( "DIV" );
			document.body.appendChild( tile );
			tile.style.position = "fixed";
			tile.style.width = width;
			tile.style.height = height;
			tile.style.top = top + height * i;
			tile.style.left = left + width * j;
			tile.style.border = "1px solid #000000";
			tile.style.overflow = "hidden";
			tile.innerHTML = tileContent;
		}
	}
}

UPD: этот глюк только если у оригинального элемента position=fixed.