title: Merging Text Nodes Together After Inserting Span
body: <p>I have an extension where I am storing/retrieving a section of the DOM structure (always a selection of text on the screen) the user has selected. When I am storing a selection, I enclose the section in a SPAN tag, and highlight the text in yellow. This causes the DOM structure around the selected text to split up into various text nodes. This causes a problem for me as when I try to restore this selection (without refreshing the page) it causes problems as the DOM structure has been modified.</p>
  
  <p>My question is how do I prevent the DOM structure from splitting up after inserting the SPAN? If this cannot be achieved, how would I reassemble the DOM structure after removing the SPAN tag to its original state?</p>
  
  <pre><code>//Insert the span
  var sel = restoreSelection(mootsOnPage[i].startXPath);
  var range = sel.getRangeAt(0).cloneRange();
  var newNode = document.createElement('span');
  newNode.className = 'highlightYellow';
  range.surroundContents(newNode); 
  
  
  //Original DOM structure
  &lt;p&gt;Hello there, how are you today&lt;/p&gt;
  
  
  //What the DOM looks like after insertion of SPAN
  &lt;p&gt;
    "Hello there, "
    &lt;span class="highlightYellow"&gt;how&lt;/span
    " are you today"
  &lt;/p&gt;
  </code></pre>