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

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 bei jQuery, daher scheint diese Aufgabe für mich eine große Herausforderung zu sein. Könnte mich jemand auf eine zu verwendende Funktion / Auswahl hinweisen?

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

Mark hat mit jQuery eine bessere Lösung , aber Sie können dies möglicherweise auch in normalem JavaScript tun.

In Javascript childNodesgibt Ihnen die Eigenschaft alle untergeordneten Knoten eines Elements, einschließlich Textknoten.

Wenn Sie also wussten, dass der zu ändernde Text immer das erste im Element sein würde, dann geben Sie zB diesen HTML-Code an:

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

Sie könnten dies tun:

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

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

Natürlich können Sie immer noch jQuery verwenden, um <div>das zuerst auszuwählen (dh var your_div = $('your_div').get(0);).

Update 2018

Da dies eine sehr beliebte Antwort ist, habe ich beschlossen, sie ein wenig zu aktualisieren und zu verschönern, indem ich den Textknoten-Selektor als Plugin zu jQuery hinzufügte.

Im folgenden Snippet sehen Sie, dass ich eine neue jQuery-Funktion definiere, die alle (und nur) die textNodes abruft. Sie können diese Funktion auch mit beispielsweise der first()Funktion verketten. Ich schneide den Textknoten ab und überprüfe, ob er nach dem Zuschneiden nicht leer ist, da Leerzeichen, Tabulatoren, neue Zeilen usw. auch als Textknoten erkannt werden. Wenn Sie diese Knoten auch benötigen, entfernen Sie diese einfach aus der if-Anweisung in der jQuery-Funktion.

Ich habe ein Beispiel hinzugefügt, wie der erste Textknoten ersetzt wird und wie alle Textknoten ersetzt werden.

Dieser Ansatz erleichtert das Lesen des Codes und die mehrfache Verwendung für verschiedene Zwecke.

Das Update 2017 (adrach) sollte auch weiterhin funktionieren, wenn Sie dies bevorzugen.

Als jQuery-Erweiterung

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

Update 2017 (adrach):

Es sieht so aus, als hätten sich einige Dinge geändert, seit dies veröffentlicht wurde. Hier ist eine aktualisierte Version

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

Ursprüngliche Antwort (funktioniert nicht für aktuelle Versionen)

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

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

Siehe In Aktion

Markup:

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

Dies ändert nur den ersten Textknoten

Schließen Sie einfach den zu ändernden Text in eine Spanne mit einer Klasse ein, die Sie auswählen möchten.

Beantwortet nicht unbedingt Ihre Frage, die ich kenne, aber wahrscheinlich eine bessere Codierungspraxis. Halten Sie die Dinge sauber und einfach

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

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 sehr einfach:

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

Sie geben nicht an, wie Sie dies verallgemeinern möchten. Wenn Sie beispielsweise den Text des ersten Textknotens innerhalb von ändern möchten <div>, können Sie Folgendes tun:

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

Hier ist noch 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);

Viele gute Antworten hier, aber sie behandeln nur einen Textknoten mit Kindern. In meinem Fall musste ich alle Textknoten bearbeiten und HTML-Kinder ignorieren, ABER DIE BESTELLUNG ERHALTEN.

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 BESTELLUNG ZU ERHALTEN

    $('#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 der jsfiddle davon funktioniert

Ich denke, Sie suchen nach .prependTo ().

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

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

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

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

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

Wenn jedoch mehr als ein Zielelement vorhanden ist, werden nach dem ersten für jedes Ziel geklonte Kopien des eingefügten Elements erstellt.

Einfache Antwort:

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

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

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

2019 vesrsion - Short & Simple

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

Erläuterung

document.querySelector('#your-div-id') wird zur 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 Textknotenwert 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 seit Jahren verwende. Ich dachte nur, ich sollte diese Wahrscheinlichkeit hier posten, weil sich einige Leute mehr darum kümmern als um die Tatsache, dass dies die beste Lösung ist.