Comment puis-je modifier le texte d'un élément sans modifier ses éléments enfants?

Je souhaite mettre à jour le texte de l'élément de manière dynamique:

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

Je suis nouveau dans jQuery, donc cette tâche semble être assez difficile pour moi. Quelqu'un pourrait-il m'indiquer une fonction / sélecteur à utiliser?

Si c'est possible, j'aimerais le faire sans ajouter de nouveau conteneur pour le texte que je dois modifier.

Mark a une meilleure solution en utilisant jQuery , mais vous pourrez peut-être le faire également en JavaScript standard.

En Javascript, la childNodespropriété vous donne tous les nœuds enfants d'un élément, y compris les nœuds de texte.

Donc, si vous saviez que le texte que vous vouliez changer allait toujours être la première chose dans l'élément, alors donné par exemple ce HTML:

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

Vous pouvez faire ceci:

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

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

Bien sûr, vous pouvez toujours utiliser jQuery pour sélectionner le <div>en premier lieu (ie var your_div = $('your_div').get(0);).

Mise à jour 2018

Comme il s'agit d'une réponse assez populaire, j'ai décidé de la mettre à jour et de l'embellir un peu en ajoutant le sélecteur de noeud de texte à jQuery en tant que plugin.

Dans l'extrait ci-dessous, vous pouvez voir que je définis une nouvelle fonction jQuery qui obtient tous (et uniquement) les textNodes. Vous pouvez également enchaîner cette fonction avec par exemple la first()fonction. Je fais une découpe sur le nœud de texte et vérifie s'il n'est pas vide après la découpe car les espaces, les tabulations, les nouvelles lignes, etc. sont également reconnus comme des nœuds de texte. Si vous avez également besoin de ces nœuds, supprimez simplement cela de l'instruction if de la fonction jQuery.

J'ai ajouté un exemple comment remplacer le premier nœud de texte et comment remplacer tous les nœuds de texte.

Cette approche facilite la lecture du code et facilite son utilisation plusieurs fois et à des fins différentes.

La mise à jour 2017 (adrach) devrait toujours fonctionner aussi si vous préférez cela.

En tant qu'extension 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>

Mise à jour 2017 (adrach):

Il semble que plusieurs choses aient changé depuis sa publication. Voici une version mise à jour

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

Réponse originale (ne fonctionne pas pour les versions actuelles)

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

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

Voir en action

Balisage:

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

Cela ne change que le premier textnode

Enveloppez simplement le texte que vous souhaitez modifier dans une plage avec une classe à sélectionner.

Ne répond pas nécessairement à votre question, je sais, mais, probablement une meilleure pratique de codage. Gardez les choses propres et 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')

Pour le cas spécifique que vous avez mentionné:

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

... c'est très simple:

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

Vous ne dites pas comment vous voulez généraliser cela. Si, par exemple, vous souhaitez modifier le texte du premier nœud de texte dans le <div>, vous pouvez faire quelque chose comme ceci:

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

Voici encore une autre méthode: 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);

Beaucoup de bonnes réponses ici, mais elles ne gèrent qu'un seul nœud de texte avec des enfants. Dans mon cas, j'avais besoin d'opérer sur tous les nœuds de texte et d'ignorer les enfants html MAIS PRESERVEZ LA COMMANDE.

Donc, si nous avons un cas comme celui-ci:

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

Nous pouvons utiliser le code suivant pour modifier uniquement le texte ET CONSERVER LA COMMANDE

    $('#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>

Voici le jsfiddle de son fonctionnement

Je pense que vous recherchez .prependTo ().

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

Nous pouvons également sélectionner un élément sur la page et l'insérer dans un autre:

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

Si un élément sélectionné de cette manière est inséré ailleurs, il sera déplacé dans la cible (non cloné):

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

S'il y a plus d'un élément cible, cependant, des copies clonées de l'élément inséré seront créées pour chaque cible après le premier.

Réponse simple:

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

Le problème avec la réponse de Mark est que vous obtenez également des nœuds de texte vides. Solution comme plugin jQuery:

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

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

C'est une vieille question mais vous pouvez créer une fonction simple comme celle-ci pour vous faciliter la vie:

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

Exemple:

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

Usage:

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

Vesrsion 2019 - Court et simple

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

Explication

document.querySelector('#your-div-id') est utilisé pour sélectionner le parent (l'élément dont vous êtes sur le point de modifier le texte)

.childNodes[0] sélectionne le nœud de texte

.nodeValue = 'new text' définit la valeur du nœud de texte sur "nouveau texte"

Cette réponse est peut-être inspirée du commentaire de Dean Martin. Je ne peux pas le dire avec certitude puisque j'utilise cette solution depuis des années maintenant. Je pensais juste que je devrais afficher cette probabilité ici parce que certaines personnes se soucient plus de cela que du fait que c'est la meilleure solution.