Есть 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];
};
