[WebBizMedia]

Второй день голову ломаю, нужно визуализировать для пользователя иерархию DOM, вот что получилось на текущий момент:

function createTreeDoom(objRoot,treeRoot){	 
	var child = objRoot.children();			 
	if(child.length > 0){					
		if(!treeRoot){						
			var wrapTree = $('#layerTree');
			treeRoot = $('<ul/>',{text: objRoot.get(0).tagName+'_'+objRoot.attr('title')}).appendTo(wrapTree);
		}
		$.each(child, function(){
			var newlayer = $('<ul/>',{text: $(this).get(0).tagName+'_'+$(this).attr('title')}).appendTo(treeRoot);
				newlayer.data('obj_id',$(this).attr('id'));
				newlayer.css('margin-left','20px');
				if(child.children().length > 0){
						return createTreeDoom(child,newlayer);
				};
			});	
		};
				
};

Функция должна проходить по DOM-дереву и визуализировать его структуру.
Допустим есть такая структура:

<div class="pages" title="root">
			<div title="div1"></div>
			<div title="div2">
				<div title="div4">
					<div title="div6"></div>
					<div title="div7"></div>
				</div>
				<div title="div5"></div>
			</div>
			<div title="div3"></div>
		</div>

Но на выходе получаю не совсем что нужно:

DIV_root

DIV_div1

DIV_div4

DIV_div6
DIV_div7

DIV_div5

DIV_div6
DIV_div7

DIV_div2

DIV_div4

DIV_div6
DIV_div7

DIV_div5

DIV_div6
DIV_div7

DIV_div3

DIV_div4

DIV_div6
DIV_div7

DIV_div5

DIV_div6
DIV_div7