Sostituire solo il testo all'interno di un div con jQuery

Question

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 io sono il testo" a "Ciao sto sostituire" utilizzando jQuery. Questo potrebbe essere facile ma non sono in grado di farlo.

L'utilizzo di $('#one').text('') svuota completamente l'intero #One div.

Answer 1

Il testo non deve essere da solo. Inseriscilo in un elemento span.

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

Answer 2

È necessario impostare il testo a 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')); 

Answer 3

Trova i nodi di testo (nodeType==3) e sostituire la 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/

Answer 4

Se effettivamente conoscere il testo che si sta per sostituire si potrebbe usare

$('#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 i nodi di testo e il secondo nodo è quello che vogliamo sostituire.

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

Answer 5

Un altro approccio è tenere questo elemento, modificare il testo, quindi aggiungere l'elemento posteriore

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