title: Replace text at top-level of node without breaking formatting of children
body: <p>If I have the following html code:</p>
  
  <pre><code>&lt;div id="element"&gt;
  Qwerty Foo Bar 
  &lt;span style="color: red;"&gt;This text should/will never be changed by the script.&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I want to change "Foo" to "baz", I can do the following:</p>
  
  <pre><code>var element = document.getElementById('element');
  element.innerText = element.innerText.replace('Foo', 'baz');
  </code></pre>
  
  <p>However this will destroy the formatting of the red text.</p>
  
  <p>How can you do this?</p>
  
  <p>I don't need cross-browser support, only support for chrome and I don't want to use a js framework. jsFiddle: <a href="http://jsfiddle.net/cLzJD/3/" rel="nofollow">http://jsfiddle.net/cLzJD/3/</a></p>