jQuery aggiornare il testo dell'elemento html senza influenzare gli elementi HTML HTML

Question

Ho un piccolo problema e non so come risolverlo.

devo una gerarchia HTML come quello qui

<ul id="mylist"> 
    <li id="el_01"> 
     <div class="title"> 
      Title Goes Here 
      <span class="openClose"></span> 
     </div> 
    </li> 
</ul> 

Quello che mi piace fare è quello di modificare il "Title Goes Here".

Quello che ho provare è:

$('#el_01 title').text('New Title Goes Here'); 

Ma anche rimuovere il:

<span class="openClose"></span> 

C'è un modo per aggiornare solo il "Title Goes Here" senza influenzare l'elemento arco?

Answer 1

È possibile modificare il nodo di testo direttamente accedendo all'elemento DOM e ottenendo il suo firstChild.

$('#el_01 .title')[0].firstChild.data = 'New Title Goes Here'; 

Se ci sono diversi .title elementi, è possibile farlo in un .each() loop.

$('#el_01 .title').each(function(i,el) { 
    el.firstChild.data = 'New Title Goes Here'; 
}); 

Answer 2

due possibili soluzioni:

O: Avvolgere il testo in un arco di proprio:

<div class="title"> 
    <span class="text">Title Goes Here</span> 
    <span class="openClose"></span> 
</div> 

... e aggiornare che:

$('#el_01 .text').text('New Title Goes Here'); 

Oppure: Conservare una copia o f lo span openClose e reinserirlo dopo l'aggiornamento del testo:

var openClose = $('#el_01 .title .openClose'); 
$('#el_01 .title').text('New Title Goes Here').append(openClose);