Aetae,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.bar{
border: #FF3399 2px solid ;
padding: 5px;
}
div {
display: inline;
}
</style>
</head>
<body>
<div class="foo">1</div>
<div class="bar"><div class="foo">2</div>
<div class="foo">3</div></div>
<div class="bar"><div class="foo">4</div></div>
<div class="foo">5</div>
<input name="" type="button" value="go" onclick="go()">
<script>
var divs = [].slice.call(document.querySelectorAll('.foo')),
len = divs.length,
elem = document.createElement("div");
function go() {
for (var i = 0; i < len; i++) {
var rand = Math.floor(Math.random() * len);
divs[i].parentNode.replaceChild(elem, divs[i]);
i != rand && divs[rand].parentNode.replaceChild(divs[i], divs[rand]);
elem.parentNode.replaceChild(divs[rand], elem)
}
}
</script>
</body>
</html>