<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {border:1px solid #aac}
div.warp {border:0;background:#dfd}
</style>
</head>
<body>
<div id="some">
<div class="sm_level_1">s1</div>
<div class="sm_level_2">s2</div>
<div class="sm_level_3">s3</div>
<div class="sm_level_4">s4</div>
<div class="sm_level_5">s</div>
<div class="sm_level_6">s</div>
<div class="sm_level_7">s</div>
<div class="sm_level_8">s</div>
<div class="sm_level_9">s</div>
<div class="sm_level_10">s</div>
</div>
<script type="text/javascript">
function createWarp(start,end){
var e=document.getElementById('some'),
divs=e.getElementsByTagName('div'),
i=divs.length,
elements=[], n, w;
var warper=document.createElement('div'); warper.className='warp';
while(i--){
n = divs[i].className.slice(9); //срезаем sm_level_
if(n>=start&&n<=end)elements.push(divs[i]);
}
var last=elements[0].nextSibling;
this.warp=function(){
var i = elements.length;
w = w==warper?document.createDocumentFragment():warper;
while(i--) w.appendChild(elements[i]);
if(last) e.insertBefore(w,last);
else e.appendChild(w);
}
}
//ниже нужно только для демо
w=new createWarp(1,4);
function go(txt){
if(txt.defaultValue!=txt.value){
var v=txt.value.split(',');
w=new createWarp(+v[0],+v[1]);
}
txt.defaultValue=txt.value;
w.warp()
}
</script>
<input type = "button" value = "(un)warp" onclick = "go(nextSibling)"/><input type="text" value="1,4"/>
</body>
</html>
Вот простейший примерчик, на коленке.