¿Cómo puedo cambiar el texto de un elemento sin cambiar sus elementos secundarios?

Me gustaría actualizar el texto del elemento de forma dinámica:

<div>
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

Soy nuevo en jQuery, por lo que esta tarea parece ser bastante desafiante para mí. ¿Alguien podría indicarme una función / selector para usar?

Si es posible, me gustaría hacerlo sin agregar un nuevo contenedor para el texto que necesito cambiar.

Mark tiene una mejor solución usando jQuery , pero es posible que también pueda hacer esto en JavaScript normal.

En Javascript, la childNodespropiedad le brinda todos los nodos secundarios de un elemento, incluidos los nodos de texto.

Entonces, si supiera que el texto que desea cambiar siempre será lo primero en el elemento, entonces, dado, por ejemplo, este HTML:

<div id="your_div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

Podrías hacer esto:

var your_div = document.getElementById('your_div');

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

Por supuesto, aún puede usar jQuery para seleccionar <div>en primer lugar (es decir var your_div = $('your_div').get(0);).

Actualización 2018

Como esta es una respuesta bastante popular, decidí actualizarla y embellecerla un poco agregando el selector de nodo de texto a jQuery como complemento.

En el fragmento a continuación, puede ver que defino una nueva función jQuery que obtiene todos (y solo) los textNodes. También puede encadenar esta función con, por ejemplo, la first()función. Hago un recorte en el nodo de texto y verifico si no está vacío después del recorte porque los espacios, pestañas, nuevas líneas, etc. también se reconocen como nodos de texto. Si también necesita esos nodos, simplemente elimínelos de la declaración if en la función jQuery.

Agregué un ejemplo de cómo reemplazar el primer nodo de texto y cómo reemplazar todos los nodos de texto.

Este enfoque facilita la lectura del código y facilita su uso varias veces y con diferentes propósitos.

La Actualización 2017 (adrach) también debería funcionar si lo prefiere.

Como extensión jQuery

//Add a jQuery extension so it can be used on any jQuery object
jQuery.fn.textNodes = function() {
  return this.contents().filter(function() {
    return (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== "");
  });
}

//Use the jQuery extension
$(document).ready(function(){
  $('#replaceAll').on('click', () => {
    $('#testSubject').textNodes().replaceWith('Replaced');
  });

  $('#replaceFirst').on('click', () => {
    $('#testSubject').textNodes().first().replaceWith('Replaced First');
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
   **text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **also text to change**
   <p>text that should not change</p>
   <p>text that should not change</p>
   **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

Equivalente de Javascript (ES)

//Add a new function to the HTMLElement object so it cna be used on any HTMLElement
HTMLElement.prototype.textNodes = function() {
  return [...this.childNodes].filter((node) => {
    return (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "");
  });
}

//Use the new HTMLElement function
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#replaceAll').addEventListener('click', () => {
    document.querySelector('#testSubject').textNodes().forEach((node) => {
      node.textContent = 'Replaced';
    });
  });

  document.querySelector('#replaceFirst').addEventListener('click', function() {
    document.querySelector('#testSubject').textNodes()[0].textContent = 'Replaced First';
  });
});

p {
  margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
  **text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **also text to change**
  <p>text that should not change</p>
  <p>text that should not change</p>
  **last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

Actualización 2017 (adrach):

Parece que varias cosas han cambiado desde que se publicó. Aquí hay una versión actualizada

$("div").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("change text");

Respuesta original (no funciona para versiones actuales)

$("div").contents().filter(function(){ return this.nodeType == 3; })
.filter(':first').text("change text");

Fuente: http://api.jquery.com/contents/

Ver en acción

Margen :

$(function() {
  $('input[type=button]').one('click', function() {
    var cache = $('#parent').children();
    $('#parent').text('Altered Text').append(cache);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">Some text
  <div>Child1</div>
  <div>Child2</div>
  <div>Child3</div>
  <div>Child4</div>
</div>
<input type="button" value="alter text" />

<div id="divtochange">
    **text to change**
    <div>text that should not change</div>
    <div>text that should not change</div>
</div>

$(document).ready(function() {
    $("#divtochange").contents().filter(function() {
            return this.nodeType == 3;
        })
        .replaceWith("changed text");
});

Esto cambia solo el primer nodo de texto

Simplemente envuelva el texto que desea cambiar en un intervalo con una clase para seleccionar.

No necesariamente responde a su pregunta, lo sé, pero probablemente sea una mejor práctica de codificación. Mantenga las cosas limpias y simples

<div id="header">
   <span class="my-text">**text to change**</span>
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

¡Voilà!

$('#header .mytext').text('New text here')

Para el caso específico que mencionaste:

<div id="foo">
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

... esto es muy facil:

var div = document.getElementById("foo");
div.firstChild.data = "New text";

No dice cómo quiere generalizar esto. Si, digamos, desea cambiar el texto del primer nodo de texto dentro del <div>, podría hacer algo como esto:

var child = div.firstChild;
while (child) {
    if (child.nodeType == 3) {
        child.data = "New text";
        break;
    }
    child = child.nextSibling;
}

Aquí es todavía otro método: http://jsfiddle.net/qYUBp/7/

HTML

<div id="header">
   **text to change**
   <div>
       text that should not change
   </div>
   <div>
       text that should not change
   </div>
</div>

JQUERY

var tmp=$("#header>div").html();
$("#header").text("its thursday").append(tmp);

Aquí hay muchas respuestas excelentes, pero solo manejan un nodo de texto con niños. En mi caso, necesitaba operar en todos los nodos de texto e ignorar los niños html PERO PRESERVAR EL ORDEN.

Entonces, si tenemos un caso como este:

<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

Podemos utilizar el siguiente código para modificar solo el texto Y CONSERVAR EL PEDIDO

    $('#parent').contents().filter(function() {
        return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
    }).each(function() {
    		//You can ignore the span class info I added for my particular application.
        $(this).replaceWith(this.nodeValue.replace(/(\w+)/g,"<span class='IIIclassIII$1' onclick='_mc(this)' onmouseover='_mr(this);' onmouseout='_mt(this);'>$1X</span>"));
	});

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    and some other text
    <div>Child3</div>
    <div>Child4</div>
    and here we are again
</div>

Aquí está el jsfiddle de que funciona

Creo que estás buscando .prependTo ().

http://api.jquery.com/prependTo/

También podemos seleccionar un elemento de la página e insertarlo en otro:

$ ('h2'). prependTo ($ ('. contenedor'));

Si un elemento seleccionado de esta manera se inserta en otro lugar, se moverá al destino (no se clonará):

<div class="container">  
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div> 
</div>

Sin embargo, si hay más de un elemento de destino, se crearán copias clonadas del elemento insertado para cada destino después del primero.

Respuesta simple:

$("div").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with"

El problema con la respuesta de Mark es que también obtienes nodos de texto vacíos. Solución como complemento jQuery:

$.fn.textnodes = function () {
    return this.contents().filter(function (i,n) {
        return n.nodeType == 3 && n.textContent.trim() !== "";
    });
};

$("div").textnodes()[0] = "changed text";

Esta es una pregunta antigua, pero puede hacer una función simple como esta para hacer su vida más fácil:

$.fn.toText = function(str) {
    var cache = this.children();
    this.text(str).append(cache);
}

Ejemplo:

<div id="my-div">
   **text to change**
   <p>
       text that should not change
   </p>
   <p>
       text that should not change
   </p>
</div>

Uso:

$("#my-div").toText("helloworld");

Vesrsion 2019 - Corto y simple

document.querySelector('#your-div-id').childNodes[0].nodeValue = 'new text';

Explicación

document.querySelector('#your-div-id') se utiliza para seleccionar el padre (el elemento cuyo texto está a punto de cambiar)

.childNodes[0] selecciona el nodo de texto

.nodeValue = 'new text' establece el valor del nodo de texto en "texto nuevo"

Esta respuesta posiblemente esté inspirada en el comentario de Dean Martin. No puedo decirlo con certeza ya que he estado usando esta solución durante años. Pensé que debería publicar esta probabilidad aquí porque a algunas personas les importa más que el hecho de que esta es la mejor solución.