子要素を変更せずに要素のテキストを変更するにはどうすればよいですか？

要素のテキストを動的に更新したい：

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

私はjQueryを初めて使用するので、このタスクは私にとって非常に難しいようです。誰かが使用する関数/セレクターを教えてもらえますか？

可能であれば、変更する必要のあるテキスト用の新しいコンテナーを追加せずにそれを実行したいと思います。

MarkはjQueryを使用してより良いソリューションを持っていますが、通常のJavaScriptでもこれを実行できる場合があります。

JavaScriptでは、このchildNodesプロパティは、テキストノードを含む、要素のすべての子ノードを提供します。

したがって、変更するテキストが常に要素の最初のものになることがわかっている場合は、たとえば次のHTMLを指定します。

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

あなたはこれを行うことができます：

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

var text_to_change = your_div.childNodes[0];

text_to_change.nodeValue = 'new text';

もちろん、jQueryを使用<div>して最初の場所（つまりvar your_div = $('your_div').get(0);）を選択することもできます。

2018年の更新

これは非常に人気のある回答なので、プラグインとしてjQueryにtextnodeセレクターを追加することで、少し更新して美化することにしました。

以下のスニペットでは、すべての（そして唯一の）textNodeを取得する新しいjQuery関数を定義していることがわかります。この関数は、たとえば関数と連鎖させることもできfirst()ます。スペース、タブ、改行などもテキストノードとして認識されるため、テキストノードでトリミングを行い、トリミング後に空でないことを確認します。それらのノードも必要な場合は、jQuery関数のifステートメントから単純に削除します。

最初のテキストノードを置き換える方法とすべてのテキストノードを置き換える方法の例を追加しました。

このアプローチにより、コードが読みやすくなり、コードを複数回、さまざまな目的で使用しやすくなります。

必要に応じて、Update 2017（adrach）も引き続き機能します。

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）同等

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

2017年更新（adrach）：

これが投稿されてから、いくつかの変更があったようです。こちらが更新されたバージョンです

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

元の回答（現在のバージョンでは機能しません）

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

ソース：http : //api.jquery.com/contents/

実際に見る

マークアップ：

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

これは最初のテキストノードのみを変更します

変更するテキストを、選択するクラスでスパンにラップするだけです。

私が知っているあなたの質問に必ずしも答えるとは限りませんが、おそらくより良いコーディングの実践です。物事をクリーンでシンプルに保つ

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

ほら！

$('#header .mytext').text('New text here')

あなたが言及した特定のケースについて：

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

...これはとても簡単です：

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

これをどのように一般化したいかは述べていません。たとえば、内の最初のテキストノードのテキストを変更する場合は、次の<div>ようにします。

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

ここにさらに別の方法があります：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);

ここにはたくさんの素晴らしい答えがありますが、それらは子供を持つ1つのテキストノードしか処理しません。私の場合、すべてのテキストノードを操作し、htmlの子を無視する必要がありますが、順序は保持します。

したがって、次のようなケースがある場合：

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

次のコードを使用して、テキストのみを変更し、順序を維持できます。

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

これが動作しているjsfiddleです

.prependTo（）を探していると思います。

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

ページ上の要素を選択して、別の要素に挿入することもできます。

$（ 'h2'）。prependTo（$（ '。container'））;

この方法で選択された要素が別の場所に挿入された場合、その要素はターゲットに移動されます（クローンではありません）。

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

ただし、複数のターゲット要素がある場合、挿入された要素の複製されたコピーは、最初の後に各ターゲットに対して作成されます。

簡単な答え：

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

マークの答えの問題は、空のテキストノードも取得することです。jQueryプラグインとしてのソリューション：

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

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

これは古い質問ですが、次のような単純な関数を作成して人生を楽にすることができます。

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

例：

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

使用法：

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

2019バージョン-ショート＆シンプル

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

説明

document.querySelector('#your-div-id') 親（変更しようとしているテキストの要素）を選択するために使用されます

.childNodes[0] テキストノードを選択します

.nodeValue = 'new text' テキストノードの値を「新しいテキスト」に設定します

この答えは、おそらくディーン・マーティンのコメントに触発されたものです。このソリューションを何年も使用しているので、はっきりとは言えません。一部の人々はこれが最善の解決策であるという事実よりもそれを気にしているので、私はこの確率をここに投稿するべきだと思いました。