reversing dom surgery

[Andy]

Hi,

I have obtained an array of nodear of consecutive sibling nodes in a
dom. I have a function which creates a new span element replaces the
first element of the array in the dom with this span tag, and then
iterates the rest of the array, removing a node from its parent and
appending to the span tag. The result is that I have created a span
element around a sequence of sibling nodes in the dom, and then I can
apply a style to them.

function WrapRangeSpan (win, nodear)
{
var node1 = nodear[0];
var parent = node1.parentNode;
var span = win.document.createElement('span');

parent.replaceChild(span, node1);
span.appendChild(node1);

for (var j = 1; j < nodear.length; j++) {
var node = nodear[j];
parent.removeChild(node);
span.appendChild(node);
}
return span;
}

This works great. Can someone tell me how to reverse this process?
I.e. given such a span that I have created, I want to remove it from
the dom, and then insert its children where the span is.

Thanks,
Andy

 

[Andreas Bergmaier]

How about the following:

function unwrap(el) {
while (el.hasChildren())
el.parentNode.insertBefore(
el.removeChild(el.firstChild),
el
);
return el.parentNode.removeChild(el);
}

Bergi

 

[Thomas 'PointedEars' Lahn]

How about the following:

How about you quoting the relevant minimum of what you are replying to?

function unwrap(el) {
while (el.hasChildren())

There is no such method specified in W3C DOM Level 2+ Core or HTML5
(WD[LC]). Which DOM implementation supports it?

While there is hasChildNodes() in DOM Level 2+ and thus in HTML5,

while (el.firstChild)

is more efficient and probably more compatible. However, if you only want
to move element nodes, then perhaps the `children' property, and since it is
a reference to a NodeList object, its `length' property, could be used.

el.parentNode.insertBefore(
el.removeChild(el.firstChild),
el
);
return el.parentNode.removeChild(el);
}

PointedEars

 

[Thomas 'PointedEars' Lahn]

el
);

And I did forget: You do not have to remove a node in order to move it.
Both appendChild() and insertBefore() will do that automatically, which
can only be worked around by cloning the node first. So

el.parentNode.insertBefore(el.firstChild, el);

should suffice here.


PointedEars

 

[Andreas Bergmaier]

How about you quoting the relevant minimum of what you are replying to?

I wanted to reply to the whole post, will I have to fullquote it?

while (el.hasChildren())

There is no such method specified in W3C DOM Level 2+ Core or HTML5
(WD[LC]). Which DOM implementation supports it?

While there is hasChildNodes() in DOM Level 2+ and thus in HTML5 [...]

Sorry, of course I meant that method. Sometimes I'm faster typing than
thinking.
Bergi

 

[Thomas 'PointedEars' Lahn]

I wanted to reply to the whole post, will I have to fullquote it?

No, you can and should trim greetings and signatures, and if all else
fails you can summarize the content. See also <http://learn.to/quote>
(no kidding)


HTH

PointedEars