Jquery kullanarak yalnızca bir div içindeki metni değiştirin

Bende şöyle bir div var:

<div id="one">
       <div class="first"></div>
       "Hi I am text"
       <div class="second"></div>
       <div class="third"></div>
</div>

Jquery kullanarak yalnızca "Merhaba ben metin" olan metni "Merhaba değiştiriyorum" olarak değiştirmeye çalışıyorum. Bu kolay olabilir ama yapamıyorum.

$('#one').text('')Sadece kullanmak tüm #Onediv'i boşaltır .

Metin kendi başına olmamalıdır. Bir spanelementin içine koyun .

Şununla değiştirin:

<div id="one">
       <div class="first"></div>
       <span>"Hi I am text"</span>
       <div class="second"></div>
       <div class="third"></div>
</div>

$('#one span').text('Hi I am replace');

Metin düğümlerini ( nodeType==3) bulun ve aşağıdakileri değiştirin textContent:

$('#one').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});

Canlı örnek: http://jsfiddle.net/VgFwS/

Metni boş bir dizeden başka bir şeye ayarlamanız gerekir. Buna ek olarak, .html () işlevi bunu div'in HTML yapısını korurken yapmalıdır.

$('#one').html($('#one').html().replace('text','replace'));

Değiştireceğiniz metni gerçekten biliyorsanız, şunu kullanabilirsiniz:

$('#one').contents(':contains("Hi I am text")')[0].nodeValue = '"Hi I am replace"';

http://jsfiddle.net/5rWwh/

Veya

$('#one').contents(':not(*)')[1].nodeValue = '"Hi I am replace"';

$('#one').contents(':not(*)') bu durumda metin düğümleri olmayan eleman olmayan alt düğümleri seçer ve ikinci düğüm, değiştirmek istediğimiz düğümdür.

http://jsfiddle.net/5rWwh/1/

Diğer bir yaklaşım, o öğeyi tutmak, metni değiştirmek ve ardından bu öğeyi geri eklemek.

const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)

Her ihtimale karşı HTML'yi değiştiremezseniz. Çok ilkel ama kısa ve çalışıyor. (Üst div'i boşaltır, dolayısıyla alt div'ler kaldırılır)

$('#one').text('Hi I am replace');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="one">
  <div class="first"></div>
  "Hi I am text"
  <div class="second"></div>
  <div class="third"></div>
</div>