Question

Is there a way in jQuery to replace only the textNode of an element without destroying any child DOM elements?

<a href="#"><span>Text we don't want replaced</span> Text we want replaced</a>

When using jquery.text([content]) it will replace any child nodes as well as the text content. Thus resulting in…

<a href="#">Replaced Text</a>

To get around this issue, I use the javascript function: replaceWholeText, but is there a better more jQuery-esque way of doing this?

$('a.button')[0].lastChild.replaceWholeText('Replacement Text');

Second question: Will this work in all browsers?

jsfiddle example showing both the jQuery and Javascript methods:
http://jsfiddle.net/highwayoflife/ABfMS/1/

Answer 1

but is there a better more jQuery-esque way of doing this?

jQuery doesn’t offer a specific method for doing that, no.