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

Question

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

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

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

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

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

Update

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

Answer 1

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

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

http://jsfiddle.net/VsAZu/

Answer 2

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

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

Или представьте, что вы могли бы структурировать разметку так, чтобы «Добро пожаловать» часть была пролет обернутой вокруг него, как так:

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

И направьте его таким образом.

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').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 дел.
2. .filter(function() { return this.nodeType == 3 && this.data == "Welcome"; фильтровать его двумя параметрами: «textnode-3» - это «Добро пожаловать».
3. .each(function(){ this.data = "HI"; }); Изменить каждый Добро пожаловать на "HI"

LIVE DEMO