jQuery actualizar el texto del elemento html sin afectar los elementos hijos HTML

Question

Tengo un pequeño problema y no sé cómo solucionarlo.

que tienen una jerarquía HTML como el que aquí

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

Lo que me gusta hacer es modificar el "título va aquí".

Lo que tengo que probarlo es:

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

Pero eso también quitar el:

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

¿Hay una manera de actualizar sólo el "título va aquí" sin afectar al elemento span?

Answer 1

Puede editar el nodo de texto directamente accediendo al elemento DOM y obteniendo su firstChild.

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

Si hay varios elementos .title, puede hacerlo en un bucle .each().

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

Answer 2

Dos posible solución:

O bien: ajustar el texto en un lapso de su propia:

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

... y actualizar que:

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

O: Guarde una copia o f el openClose span y vuelva a insertarlo después de actualizar el texto:

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