Comment puis-je modifier un élément du texte sans modification de ses éléments enfant?

Question

Je voudrais mettre à jour l'élément de texte de façon dynamique:

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

Je suis nouveau sur jQuery, cette tâche semble être très difficile pour moi. Quelqu'un pourrait-il m'indiquer un droit de la fonction de sélection à utiliser?

Si c'est possible, j'aimerais le faire sans l'ajout d'un nouveau conteneur pour le texte, j'ai besoin de changer.

Merci à l'avance.

Answer 1

Mark a une meilleure solution à l'aide de jQuery, mais vous pourriez être en mesure de le faire régulièrement en JavaScript aussi.

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

Donc, si vous saviez le texte que vous voulez modifier a toujours été va être la première chose dans l'élément, puis donné par exemple, ce code 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 l' <div> dans la première place (ex: var your_div = $('your_div').get(0);).

Answer 2

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

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

Answer 3

Balisage :

  <div id="parent"> Some text
    <div>Child1</div>
    <div>Child2</div>
    <div>Child3</div>
    <div>Child4</div>
  </div>

JS :

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

Voir En action

Answer 4

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

Ceci ne change que la première textnode

Answer 5

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

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

Vous n'avez pas l'état de la façon dont vous voulez généraliser cette. Si, par exemple, vous voulez changer le texte du premier nœud de texte à l'intérieur de l' <div>, vous pourriez faire quelque chose comme ceci:

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