[Zaxap]

Есть html:

<p id="p1-id" class="p1-class" data-attribute="data-value">
	my
	<p сlass="p2-class1 p2-class2">
		super <i class="italic"><b>paragraph</b></i>
	</p>
</p>

Необходимо обернуть каждый тег в некоторое количество DIV, равное количеству атрибутов этих самых тегов. То есть, в итоге должно получиться нечто такое:

<div  id="p1-id">
	<div class="p1-class">
		<div data-attribute="data-value">
			<p>
				my
				<div сlass="p2-class1 p2-class2">
					<p>
						super
						<div class="italic">
							<i><b>paragraph</b></i>
						</div>
					</p>
				</div>
			</p>
		</div>
	</div>
</div>

Очень долго мучаюсь с этим и в итоге сталкиваюсь с непониманием того, как это вообще должно быть и/или работать.
Есть цикл, но он либо бесконечен, либо прерывается с ошибкой ввиду замены изначального тега создаваемым вокруг него DIV'ом => невозможно обернуть этот тег во второй-третий-...-n-ый DIV...

Как это осуществить?

Вот мой код, точнее, последний его вариант (нерабочий):

var els = document.body.getElementsByTagName("*"); // Получение вышеупомянутого html
var el = els[0], c = 0;
while (el) {
	if (el.hasAttributes()) {
		for (var i = 0, attrs = el.attributes, l = attrs.length; i < l; i++) {
			var attr = attrs[i], attr_name = attr.name;
			var wrapper = document.createElement("div");
			wrapper.setAttribute(attr_name, attr.value);

			var parent  = el.parentNode;
			var sibling = el.nextSibling;

			wrapper.appendChild(el);

			if (sibling) {
				parent.insertBefore(wrapper, sibling);
			} else {
				parent.appendChild(wrapper);
			}
		};
	}
	c++;
	el = els[c];
};