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

Hier gibt es viele gute Antworten, aber sie behandeln nur einen Textknoten mit Kindern. In meinem Fall musste ich auf alle Textknoten zu arbeiten und ignorieren html Kinder ABER PRESERVE THE ORDERING.

Wenn wir also einen Fall wie diesen haben:

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

Wir können den folgenden Code verwenden, um nur den Text zu ändern und die Reihenfolge beizubehalten

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

Hier ist die jsfiddle dass es funktioniert

Answer 2

Ich glaube, Sie suchen nach .prependTo().

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

Wir können auch ein Element aus der Seite auswählen und es in ein anderes einfügen:

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

Wenn ein auf diese Weise ausgewähltes Element an anderer Stelle eingefügt, wird es verschoben in das Ziel verschoben (nicht geklont):

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

Wenn es mehr als ein Ziel gibt Element gibt, werden jedoch geklonte Kopien des eingefügten Elements für jedes weitere jedes Ziel nach dem ersten erstellt.

Answer 3

Dies ist eine alte Frage, aber Sie können eine einfache Funktion wie diese erstellen, um Ihr Leben zu erleichtern:

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

Beispiel:

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

Verwendung:

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

Answer 4

2019 vesrsion - Kurz und einfach

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

Erläuterung

document.querySelector('#your-div-id') wird für die Auswahl des übergeordneten Elements verwendet (das Element, dessen Text Sie ändern möchten)

.childNodes[0] wählt den Textknoten aus

.nodeValue = 'new text' setzt den Wert des Textknotens auf "neuer Text"

---

Diese Antwort ist möglicherweise von Dean Martins Kommentar inspiriert. Ich kann es nicht mit Sicherheit sagen, da ich diese Lösung schon seit Jahren verwende. Ich dachte nur, ich sollte diese Wahrscheinlichkeit hier posten, weil einige Leute sich mehr dafür interessieren als für die Tatsache, dass dies die beste Lösung ist.

Answer 5

Hier ist ein rekursiver Weg:

function changeInnerText(elm,text,newText) {
    if (elm == null) {
        return;
    }
    changeInnerTextHelper(elm.firstChild, text, newText);
}
function changeInnerTextHelper(elm, text, newText) {
    if (elm == null) {
        return;
    }
    if (elm.nodeType == 3 && elm.data == text) {
        elm.data = newText;
        return;
    }
    changeInnerTextHelper(elm.firstChild, text, newText);
    changeInnerTextHelper(elm.nextSibling, text, newText);
}