Question

We came across the following situation while trying to make changes to a web page.

<div id="div1">
   Welcome <button id="clicker">Click Me</button>
</div>

This of course is just a basic example of what we ran into. All we want to do is change the text of the div without losing the button. For example, instead of Welcome, we’d like it to say Hi.

Is there a simple way to accomplish this with jQuery? I’ve tried using .replace but that didn’t seem to work.

$("#div1").text().replace("Welcome", "Hi");

Update

Thank you everybody for such a quick response and great answers. Responses from gdoron and mblase75 worked great. For simplicity, mblase75 seemed to be the easist to implement but gdoron went out of his way to explain line by line. Thank you again so much!

Answer 1

One approach would be to use the callback function for .html:

$('#div1').html(function(i,old) {
    return old.replace('Welcome','hi');
});

http://jsfiddle.net/VsAZu/