Append Text Javascript

Question

I have a span in a long section of HTML; i have done Hit Highlighting of terms by finding my text and wrapping it with a span which makes the text obvious to the user

<span id="MySpan" style="background-color:yellow">Some Text</span>

The problem I have is that adding the formatting was easy if they change the search terms i need to remove the first search; ideally without refreshing the page.

My goal is to remove the span (and with it the formatting) but preserve the text.

I can remove the span easily enough with removeChild; though that loses all the text. What I cant figure out is how to keep the innerHTML of the span; my original thought was to append it after the span so my process would be something like this.

var OriginalText = MySpan.InnerHTML();
var myDiv = document.getElementByID("MySpan");
-- Something here to append the text after the original span --
myDiv.ParentNode.removeChild(myDiv);

Im in Internet Explorer land if that makes life easier.

Answer 1

Assuming the span will contain only text:

var span = document.getElementById('MySpan');
var text = span.firstChild;
var parent = span.parentNode;
parent.replaceChild(text, span);

Answer 2

You can use css to hide the data without removing the span itself just append the css "display:none" into the span "style" attribute.

Use css

display: none;

and and then replace the data using

parentNode.replaceChild(searchstring, span)