Изменить текст div, когда div содержит другие элементы

Question

При попытке внести изменения в веб-страницу мы столкнулись со следующей ситуацией.

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

Это, конечно, лишь базовый пример того, с чем мы столкнулись.Все, что мы хотим сделать, это изменить текст div без потери button.Например, вместо Welcome мы хотели бы сказать: Hi .

Есть ли простой способ сделать это с помощью jQuery?Я пытался использовать .replace, но это не сработало.

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

Обновление

Спасибо всем за такой быстрый ответ и отличные ответы,Ответы от gdoron и mblase75 работали отлично.Для простоты mblase75, казалось, легче всего реализовать, но Гдорон старался изо всех сил объяснять построчно.Еще раз большое спасибо!

Answer 1

Один из подходов заключается в использовании функции обратного вызова для .html:

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

http://jsfiddle.net/VsAZu/

Answer 2

$('#div1').contents().filter(function() {
    return this.nodeType == 3 &&
           this.data == "Welcome"; // Or this.data.indexof("Welcome") != -1
}).each(function(){
        this.data = "HI";
    });

Что это делает? Давайте разберемся по этапам:

1. $('#div1').contents() выберите все содержимое div1 div.
2. .filter(function() { return this.nodeType == 3 && this.data == "Welcome"; отфильтруйте его по двум параметрам, узел - "textnode-3", а данные, которые он содержит, - "Welcome".
3. .each(function(){ this.data = "HI"; }); Изменить каждое приветствие на "HI"

LIVE DEMO

Answer 3

Вы могли бы сделать это так:

var el = $('#div1');
el.html( el.html().replace('Welcome', 'Hi') );

Но это немного грубо, да?Лучше создавать вещи, которые нужно изменить, с собственным элементом DOM.

<div id='div1'>
  <span class='welcome_text'>Welcome</span>
  <button id='clicker'>Click Me</button>
</div>

$('#div1 span.welcome_text').text('Hi');

Answer 4

Это не элегантно, но вы не могли бы просто сделать:

$("#div1").html('Hi <button id="clicker">Click Me</button>');

Или я представляю, что вы могли бы структурировать разметку так, чтобы часть "Welcome" была обернута вокруг нее так:

<span id="welcome">Welcome</span><button id="clicker">Click Me</button>

И нацельтесь так.