title: dom range.setStart / setEnd
body: <p>I am trying to bold only the text <code>hel</code> in this fiddle <a href="http://jsfiddle.net/yarkpakv/" rel="noreferrer">http://jsfiddle.net/yarkpakv/</a> but it does not seem to be working, what am I doing wrong??? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var range = document.createRange();
  var root_node = document.getElementById("test");
  
  range.setStart(root_node,0);
  range.setEnd(root_node,3);
  
  var newNode = document.createElement("b");
  
  range.surroundContents(newNode);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test"&gt;
      &lt;p&gt;h&lt;/p&gt;ello    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>