How to only change the text in a DOM element without replacing any child elements

Question

Hi I have a simple html structure

<h1>Title text <span>inner text</span></h1>

What I want is to replace only the text (Title text) without disturb the <span> text. Is this possible?

I don't want to add any other dom element, I would like to keep that structure. I been doing this of course.

$("h1").text("new text");

But you can guess... will replace all the innert text and the span text element as well.

Possible solution: I was thinking in copy in a variable the text of the span and then concatenate it with the new <h1> text, But I think maybe exist a better and clean way to do it.

Answer 1

Using jQuery.contents() you can replace the nodeValue similar to this:

$("h1").contents()[0].nodeValue = "new text ";

---

DEMO using jQuery.contents() to replace a text node

---

Answer 2

$("h1").each(function() {
    var textNode = document.createTextNode("new text");
    this.replaceChild(textNode, this.firstChild);
});

DEMO: http://jsfiddle.net/FvbJa/