Jak mohu změnit text prvku, aniž bych změnil jeho podřízené prvky?

Chtěl bych dynamicky aktualizovat text prvku:

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

Jsem nováčkem v jQuery, takže tento úkol se pro mě zdá být docela náročný. Mohl by mě někdo nasměrovat na funkci/selektor, kterou bych měl použít?

Pokud je to možné, rád bych to udělal bez přidání nového kontejneru pro text, který potřebuji změnit.

Odpověď

Mark má lepší řešení pomocí jQuery, ale možná to zvládnete i v běžném JavaScriptu.

V JavaScriptu childNodes vlastnost vám dává všechny podřízené uzly prvku, včetně textových uzlů.

Pokud jste tedy věděli, že text, který chcete změnit, bude vždy první věcí v prvku, pak za předpokladu, že např. toto HTML:

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

Můžete to udělat takto:

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

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

Samozřejmě můžete stále použít jQuery k výběru <div> na prvním místě (tj. var your_div = $('your_div').get(0); ).