Sostituisci solo il testo all'interno di un div usando jquery

Ho un div come:

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

Sto cercando di cambiare solo il testo da "Ciao, sono testo" a "Ciao, sostituisco" usando jquery. Potrebbe essere facile ma non sono in grado di farlo.

Usando $('#one').text('')solo svuota l'intero #Onediv.

Il testo non dovrebbe essere da solo. Mettilo in un spanelemento.

Cambialo in questo:

<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');

Trova i nodi di testo ( nodeType==3) e sostituisci textContent:

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

Esempio dal vivo: http://jsfiddle.net/VgFwS/

Devi impostare il testo su qualcosa di diverso da una stringa vuota. Inoltre, la funzione .html () dovrebbe farlo preservando la struttura HTML del div.

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

Se conosci effettivamente il testo che intendi sostituire, puoi usarlo

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

http://jsfiddle.net/5rWwh/

O

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

$('#one').contents(':not(*)') seleziona nodi figlio non elemento in questo caso nodi di testo e il secondo nodo è quello che vogliamo sostituire.

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

Un altro approccio è mantenere quell'elemento, modificare il testo, quindi aggiungere nuovamente quell'elemento

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

Per ogni evenienza, se non puoi modificare l'HTML. Molto primitivo ma breve e funziona. (Svuoterà il div genitore, quindi i div figli verranno rimossi)

$('#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>