Can a ChildNode's position transition between parents?

by Admiral Potato

HTML

<div id="experiment">
	<div id="parent_a">
		<img
			id="child"
			src="https://play-lh.googleusercontent.com/8QnH9AhsRfhPott7REiFUXXJLRIxi8KMAP0mFAZpYgd44OTOCtScwXeb5oPe1E4eP4oF"
		/>
	</div>
	<div id="parent_b">
	</div>
</div>
<div>
<button id="swapper">Swap</button>
</div>

CSS

* {
	box-sizing: border-box;
}
#experiment {
	display: flex;
}
#experiment > div {
	width: 50%;
	border: 8px solid #666;
}
#experiment img {
	max-width: 100%;
	position: relative;
	transition-duration: 1s;
	transition-property: all;
}
button {
	background-color: #f00;
	color: #000;
	border-radius: 8px;
	padding: 16px;
}

JavaScript

var parentA = document.getElementById('parent_a');
var parentB = document.getElementById('parent_b');
var custodyBattle = document.getElementById('child');
var swappeButton = document.getElementById('swapper');

swappeButton.addEventListener('click', function () {
	var targetParent = custodyBattle.parentNode === parentA ? parentB : parentA;
	targetParent.appendChild(custodyBattle);
});