Wie kann ich den Text eines Elements ändern, ohne seine untergeordneten Elemente zu ändern?

Question

Ich möchte den Text des Elements dynamisch aktualisieren:

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

Ich bin neu in jQuery, so dass diese Aufgabe scheint ziemlich schwierig für mich sein. Könnte jemand mich auf eine Funktion/Selektor zu verwenden zeigen?

Wenn es möglich ist, möchte ich dies tun, ohne einen neuen Container für den Text hinzuzufügen, den ich ändern muss.

Answer 1

Für den von Ihnen erwähnten speziellen Fall:

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

... das ist ganz einfach:

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

Sie geben nicht an, wie Sie dies verallgemeinern wollen. Wenn Sie zum Beispiel den Text des ersten Textknotens innerhalb der <div> könnten Sie etwa so vorgehen:

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

Answer 2

$.fn.textPreserveChildren = function(text) {
  return this.each(function() {
    return $(this).contents().filter(function() {
      return this.nodeType == 3;
    }).first().replaceWith(text);
  })
}

setTimeout(function() {
  $('.target').textPreserveChildren('Modified');
}, 2000);

.blue {
  background: #77f;
}
.green {
  background: #7f7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="target blue">Outer text
  <div>Nested element</div>
</div>

<div class="target green">Another outer text
  <div>Another nested element</div>
</div>

Answer 3

Einfache Antwort:

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

Answer 4

Hier ist dennoch eine andere Methode: 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);

Answer 5

Das Problem mit Marks Antwort ist, dass Sie auch leere Textknoten erhalten. Lösung als jQuery-Plugin:

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

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