Anonymous

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
div#box_1, div#box_2 {
	border: #ff0000 1px solid;
	margin-bottom:20px;
	height:100px;	
</style>
<script type="text/javascript">

function moveBack(number) {
	document.getElementById("content_a_" + number).innerHTML += document.getElementById("content_b_" + number).innerHTML;
	var d = document.getElementById("box_2");
	var e = document.getElementById("content_b_" + number);
	d.removeChild(e);
	document.getElementById("link_" + number).attributes["onclick"].value = "moveContent("+ number + ");";
}


function moveContent(number) {
	document.getElementById("box_2").innerHTML += '<div id="content_b_' + number + '">'+ document.getElementById("content_a_" + number).innerHTML + "</div>";
	document.getElementById("content_a_" + number).innerHTML = "";
	document.getElementById("link_" + number).attributes["onclick"].value = "moveBack(" + number + ");";
}

</script>
</head>

<body>
<div id="box_1">
	<div id="content_a_1"><div id="holder_1"><span id="content_name_1">cont1</span> <a id="link_1" href="#" onClick="moveContent(1);">click1</a></div></div>
	<div id="content_a_2"><div id="holder_2"><span id="content_name_2">cont2</span> <a id="link_2" href="#" onClick="moveContent(2);">click2</a></div></div>
	<div id="content_a_3"><div id="holder_3"><span id="content_name_3">cont3</span> <a id="link_3" href="#" onClick="moveContent(3);">click3</a></div></div>
	<div id="content_a_4"><div id="holder_4"><span id="content_name_4">cont4</span> <a id="link_4" href="#" onClick="moveContent(4);">click4</a></div></div>
</div>
<div id="box_2"></div>


</body>
</html>