Como posso alterar o texto de um elemento sem alterar seus elementos filho?

Eu gostaria de atualizar o texto do elemento dinamicamente:

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

Eu sou novo no jQuery, então esta tarefa parece ser bastante desafiadora para mim. Alguém poderia me indicar uma função / seletor para usar?

Se for possível, gostaria de fazer isso sem adicionar um novo contêiner para o texto que preciso alterar.

Mark tem uma solução melhor usando jQuery , mas você também pode fazer isso em JavaScript normal.

Em Javascript, o childNodes propriedade fornece todos os nós filhos de um elemento, incluindo nós de texto.

Portanto, se você sabia que o texto que deseja alterar sempre será a primeira coisa no elemento, forneça, por exemplo, este HTML:

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

Você poderia fazer isso:

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

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

Claro, você ainda pode usar jQuery para selecionar o <div>em primeiro lugar (ou seja var your_div = $('your_div').get(0);).

Atualização 2018

Como essa é uma resposta muito popular, decidi atualizá-la e embelezá-la um pouco adicionando o seletor de textnode ao jQuery como um plugin.

No trecho abaixo você pode ver que eu defino uma nova função jQuery que obtém todos (e apenas) os textNodes. Você pode encadear esta função também com, por exemplo, ofirst() função. Eu faço um corte no nó de texto e verifico se não está vazio após o corte porque espaços, tabulações, novas linhas, etc. também são reconhecidos como nós de texto. Se você precisar desses nós também, basta removê-los da instrução if na função jQuery.

Eu adicionei um exemplo de como substituir o primeiro nó de texto e como substituir todos os nós de texto.

Essa abordagem torna mais fácil ler o código e usá-lo várias vezes e com finalidades diferentes.

A atualização de 2017 (adrach) ainda deve funcionar bem, se você preferir.

Como extensão 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>

Javascript (ES) eqivilant

//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>

Atualização de 2017 (adrach):

Parece que várias coisas mudaram desde que isso foi postado. Aqui está uma versão atualizada

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

Resposta original (não funciona para as versões atuais)

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

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

Veja em ação

Markup:

$(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");
});

Isso muda apenas o primeiro textnode

Basta envolver o texto que deseja alterar em um intervalo com uma classe para selecionar.

Não necessariamente responde à sua pergunta, eu sei, mas, provavelmente, uma prática de codificação melhor. Mantenha as coisas limpas e 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 o caso específico que você mencionou:

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

... isso é muito fácil:

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

Você não declara como deseja generalizar isso. Se, digamos, você deseja alterar o texto do primeiro nó de texto dentro do <div>, você pode fazer algo assim:

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

Aqui está ainda um outro 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);

Muitas respostas boas aqui, mas eles lidam apenas com um nó de texto com filhos. No meu caso, eu precisava operar em todos os nós de texto e ignorar os filhos html, MAS PRESERVE A ORDEM.

Portanto, se tivermos um 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 usar o seguinte código para modificar apenas o texto E PRESERVAR O 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>

Aqui está a jsFiddle dele trabalhando

Acho que você está procurando por .prependTo ().

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

Também podemos selecionar um elemento da página e inseri-lo em outra:

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

Se um elemento selecionado desta forma for inserido em outro lugar, ele será movido para o destino (não clonado):

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

Se houver mais de um elemento de destino, entretanto, cópias clonadas do elemento inserido serão criadas para cada destino após o primeiro.

Resposta simples:

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

O problema com a resposta de Mark é que você também obtém textnodes vazios. Solução como plugin jQuery:

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

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

Esta é uma questão antiga, mas você pode fazer uma função simples como esta para tornar sua vida mais fácil:

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

Exemplo:

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

Versão 2019 - curta e simples

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

Explicação

document.querySelector('#your-div-id') é usado para selecionar o pai (o elemento cujo texto você está prestes a alterar)

.childNodes[0] seleciona o nó de texto

.nodeValue = 'new text' define o valor do nó de texto para "novo texto"

Esta resposta é possivelmente inspirada no comentário de Dean Martin. Não posso dizer com certeza, já que uso essa solução há anos. Achei que deveria postar essa probabilidade aqui porque algumas pessoas se preocupam mais com ela do que com o fato de ser a melhor solução.