title: getSelection & surroundContents across multiple tags
body: <p>I've got a script that changes the background colour of text that has been selected. However i'm encountering an issue when the text is selected across multiple elements/tags. </p>
  
  <p>The code that i've got is:</p>
  
  <pre><code>var text = window.getSelection().getRangeAt(0);
  var colour = document.createElement("hlight");
  colour.style.backgroundColor = "Yellow";
  text.surroundContents(colour);
  </code></pre>
  
  <p>And the error being output is:</p>
  
  <pre><code>Error: The boundary-points of a range does not meet specific requirements. =
  NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR
  Line: 7
  </code></pre>
  
  <p>I believe this is to do with the getRange() function though i'm not too sure how to proceed since I am a beginner at javascript.</p>
  
  <p>Is there any other way I can replicate what I am trying to achieve?</p>
  
  <p>Many thanks. </p>