Jquery $(element).contents().first().text("new text") doesn't work?

Question

I can't find anything about this on Google or here.

I have a div with in it, some text and some html as such:

<div id="test-div">
    http://<strong>somewebsite.com</strong>/big/long/unfriendly/path/
</div>

What I want to do, is add a <wbr> after every slash. (Because the value doesn't wrap otherwise and messes up my table). Doing a simple replace on the $('#test-div').html() will also mess with the strong tag, so that's not an option.

I figured using $('#test-div').contents() to filter out the text parts (recursively) would work. However I can't seem to edit the individual bits returned. I would expect this to change the http:// part:

$('#test-div').contents().first().text("something");

However it does nothing. I know I have my navigation right, because something like this:

$('#test-div').contents().first().wrap( "<b></b>" );

does work.

Why can't I change the text bit? (A more elegant solution to the initial problem would also be great)

Answer 1

Use like this:

$('#test-div').contents().filter(function(){
    return $.trim($(this).text()) == 'http://';
}).remove().end().prepend('something');

demo

or,

$('#test-div').contents().first().remove().end().prepend("something");

demo