1. ホーム
  2. javascript

[解決済み] 子要素を変更せずに、要素のテキストを変更するにはどうすればよいですか?

2022-05-15 20:36:17

質問

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

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

私はjQueryに新しいので、このタスクは私にとってかなり困難であると思われます。 誰かが私に使用する関数/セレクタを指し示すことができますか?

もし可能であれば、私は変更する必要があるテキストのための新しいコンテナを追加することなくそれをしたいのです。

どのように解決するのですか?

マークは、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); ).