Помогите обернуть ссылки в список?

[Kvark]

несилен пока в яваскрипте, а полный jquery тяжоловат чтобы использоваит, пытаюсь достичь того же без .wrap().
Есть такая структура:

<fieldset>
	<legend>
		Legenda
	</legend>
	<a>
		картинка текст
	</a>
	<a>
		картинка текст
	</a>
	<a>
		картинка текст
	</a>
</fieldset>

живьем:

<fieldset id="X40" widgettype="group" class="groupBox" style="height:183px; width:100%; left:0; padding:0;">
	<legend id="X40Legend" style="">
		<span class="caption" id="X40Caption">Selected Items</span>
	</legend>
	<span id="X42" type="label" style="">Your cart is currently empty.</span>
	<a buttonid="201" id="X43Border" href="javascript:tpzDrillTable('', 'View Cart/Checkout', '201','',true)" title="View Cart/Checkout" tabindex="" content="View Cart/Checkout" style="text-align:left;position:absolute; overflow:hidden; top:49px; left:3.5%; width:91.2%; height:29px;">
		<img class="HoverImage" id="X43" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/tproceed.gif" alt="View Cart/Checkout" title="View Cart/Checkout" enabled="1" style="">View Cart/Checkout
	</a>
	<a buttonid="202" id="X45Border" href="javascript:tpzDrillTable('', 'Save your Cart for later', '202','',true)" title="Save your Cart for later" tabindex="" content="Save your Cart for later" style="text-align:left;position:absolute; overflow:hidden; top:82px; left:3.5%; width:91.2%; height:29px;">
		<img class="HoverImage" id="X45" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/tsave.gif" alt="Save your Cart for later" title="Save your Cart for later" enabled="1" style="opacity:1;">Save your Cart for later
	</a>
	<a buttonid="203" id="X47Border" href="javascript:tpzDrillTable('', 'Save your Cart as a Template', '203','',true)" title="Save your Cart as a Template" tabindex="" content="Save your Cart as a Template" style="text-align:left;position:absolute; overflow:hidden; top:115px; left:3.5%; width:91.2%; height:29px;">
	   <img class="HoverImage" id="X47" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/tsave_li.gif" alt="Save your Cart as a Template" title="Save your Cart as a Template" enabled="1" style="opacity:1;">Save your Cart as a Template
	</a>
	<a buttonid="3" id="X48Border" href="javascript:tpzDrillTable('', 'Cancel', '3','',true)" title="Cancel" tabindex="" content="Cancel" style="text-align:left;position:absolute; overflow:hidden; top:148px; left:3.5%; width:91.2%; height:29px;">
		<img class="HoverImage" id="X48" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/tcancel.gif" alt="Cancel" title="Cancel" enabled="1" style="opacity:1;">Cancel
	</a>
</fieldset>

я хочю получить такое:

<fieldset>
	<legend>
		Legenda
	</legend>
	<div>
		<ul>
			<li>
				<a>
					картинка текст
				</a>
			</li>
			<li>
				<a>
					картинка текст
				</a>
			</li>
			<li>
				<a>
					картинка текст
				</a>
			</li>
		</ul>
	</div>
</fieldset>

как такое можно сделать а то уже голову сломал весь день мучаюсь

тоесть "обернуть" все ссылки дивом, а каждую ссылку в елемент списка, чтоб нормальным столбиком вывелось (точки думаю убрать стилями)
для меня засада как вставить открывющий тэг для дива и закрывающий а так же обернуть ссылки в <ul><li></li></ul>

[a_l]

Не изящно, но должно работать:

var links = document.querySelectorAll('fieldset a'),
    field = document.getElementsByTagName('fieldset')[0],
    linkTemp = '',
    div = document.createElement('div');
for(var i=0, l=links.length; i<l; i++) { 
  linkTemp += '<li>' + links[i].outerHTML + '</li>';
  links[i].outerHTML = '';
}
div.innerHTML = '<ul>' + linkTemp + '</ul>';
field.appendChild(div);

[bes]

заглянем в недра jquery: как видно из реализации, в цикле (each) перед каждым нужным элементом вставляется элемент, в который будет оборачиваться (insertBefore), а затем в него помещается сам элемент (appendChild)

wrap: function( html ) {
		var isFunction = jQuery.isFunction( html );
		return this.each(function(i) {
			jQuery( this ).wrapAll( isFunction ? html.call(this, i) : html );
		});
	},
	...
	wrapAll: function( html ) {
		if ( jQuery.isFunction( html ) ) {
			return this.each(function(i) {
				jQuery(this).wrapAll( html.call(this, i) );
			});
		}

		if ( this[0] ) {
			// The elements to wrap the target around
			var wrap = jQuery( html, this[0].ownerDocument ).eq(0).clone(true);

			if ( this[0].parentNode ) {
				wrap.insertBefore( this[0] );
			}

			wrap.map(function() {
				var elem = this;

				while ( elem.firstChild && elem.firstChild.nodeType === 1 ) {
					elem = elem.firstChild;
				}

				return elem;
			}).append( this );
		}

		return this;
	},
	...
	isFunction: function( obj ) {
		return jQuery.type(obj) === "function";
	},
	...
	type: function( obj ) {
		return obj == null ?
			String( obj ) :
			class2type[ core_toString.call(obj) ] || "object";
	},
	...
	core_toString = Object.prototype.toString,
	...
	append: function() {
		return this.domManip(arguments, true, function( elem ) {
			if ( this.nodeType === 1 || this.nodeType === 11 ) {
				this.appendChild( elem );
			}
		});
	},

[Kvark]

спасибо, "оберточную" задачку я решил в лоб так:

function WrapIt(ContainerId, WraperElementType, WraperElementId, WraperElementClass, WrapBeforeElementId, WrapAfterElementId)
{
	document.createElement(WraperElementType);
	var tmpStr = document.getElementById(ContainerId).innerHTML
	var InsertStart = tmpStr.indexOf(document.getElementById(WrapBeforeElementId).outerHTML, 0);
	var InsertEnd = tmpStr.indexOf(document.getElementById(WrapAfterElementId).outerHTML, 0) + document.getElementById(WrapAfterElementId).outerHTML.length;
	var resultStr = tmpStr.substring(InsertStart, 0) + '\n<' + WraperElementType + ' id="' + WraperElementId + '" class="' + WraperElementClass + '">\n' + tmpStr.substring(InsertStart, InsertEnd) + '\n</' + WraperElementType + '>\n' + tmpStr.substring(InsertEnd);
	alert(tmpStr.substring(InsertEnd));
	document.getElementById(ContainerId).innerHTML = resultStr;
}

Такой метод имеет право на жизнь или могут быть какие подвохи?

[ksa]

<fieldset>
	<legend>
		Legenda
	</legend>
	<a>
		картинка текст
	</a>
	<a>
		картинка текст
	</a>
	<a>
		картинка текст
	</a>
</fieldset>

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function go() {
	var of=document.getElementsByTagName('fieldset')[0];
	var oa=of.getElementsByTagName('a');
	var od=document.createElement('div');
	var ou=document.createElement('ul');
	while (oa[0]) {
		o=document.createElement('li');
		o.appendChild(oa[0]);
		ou.appendChild(o);
	};
	od.appendChild(ou);
	of.appendChild(od);
};
</script>
</head>
<body>
<fieldset>
	<legend>
		Legenda
	</legend>
	<a>
		картинка текст 1
	</a>
	<a>
		картинка текст 2
	</a>
	<a>
		картинка текст 3
	</a>
</fieldset>
<button onclick='go();'>Go</button>
</body>
</html>

[Kvark]

спасибо! то что надо по ходу...

[Kvark]

ksa,
подскажи как можно попутно убить у элементов прописаный стиль?
выглядит так:

<a buttonid="504" id="X31Border" href="javascript:void(0);" title="Item 4" tabindex="" content="Item 4" style="text-align: left; position: absolute; overflow: hidden; top: 280px; left: 25.200000000000003%; width: 72.9%; height: 29px; visibility: hidden;"><img class="HoverImage" id="X31" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Item 4" title="Item 4" enabled="0" style="opacity:0.35;">Item 4</a>

сейчас делаю так:

if (document.getElementById('X31Border')) document.getElementById('X31Border').style.cssText = "";

но остаеться слово style:

<a buttonid="504" id="X31Border" href="javascript:void(0);" title="Item 4" tabindex="" content="Item 4" style><img class="HoverImage" id="X31" onmouseover="if(top.is_ie)this.className='HoverImageHover'" onmouseout="if(top.is_ie)this.className='HoverImage'" widgettype="linklabel" align="left" src="images/obj16/ind_green.gif" alt="Item 4" title="Item 4" enabled="0" style="opacity:0.35;">Item 4</a>

[ksa]

как можно попутно убить у элементов прописаный стиль?
...
остаеться слово style

Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function go() {
	document.getElementsByTagName('div')[0].removeAttribute('style');
};
</script>
</head>
<body>
<div style='width: 100px; height: 30px; background-color: red;'></div>
<button onclick='go();'>Go</button>
</body>
</html>

http://javascript.ru/tutorial/dom/at...s#dom-atributy

[Kvark]

премного благодарю, все становиться намного яснея с вашей помощью

[Kvark]

последний вопрос по данной теме, а как усовершенствовать даную функцию что бы она так же была рекурсивной? Тоесть если у елемента есть вложеные елементы - то и им стили убрать?