title: How to only change the text in a DOM element without replacing any child elements
body: <p>Hi I have a simple html structure</p>
  
  <pre><code>&lt;h1&gt;Title text &lt;span&gt;inner text&lt;/span&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>What I want is to replace only the text (Title text) without disturb the <code>&lt;span&gt;</code> text. Is this possible?</p>
  
  <p>I don't want to add any other dom element, I would like to keep that structure. I been doing this of course.</p>
  
  <pre><code>$("h1").text("new text");
  </code></pre>
  
  <p>But you can guess... will replace all the innert text and the <code>span</code> text element as well.</p>
  
  <p>Possible solution:
  I was thinking in copy in a variable the text of the span and then concatenate it with the new <code>&lt;h1&gt;</code> text, But I think maybe exist a better and clean way to do it.</p>