[解決済み] 子要素を変更せずに、要素のテキストを変更するにはどうすればよいですか?
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);
).
関連
-
Vueの要素ツリーコントロールに破線を追加する説明
-
JavaScriptの配列共通メソッド解説
-
[解決済み】SyntaxError: JSONの位置1に予期しないトークンoがある。
-
JavaScriptのStringに関する共通メソッド
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
-
[解決済み] JavaScriptで配列の先頭に新しい配列要素を追加するにはどうすればよいですか?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] jQueryでドロップダウンリストの選択値を変更する
-
[解決済み] Webページのタイトルを動的に変更するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
vueディレクティブv-bindの使用と注意点
-
vueの補間表現とv-textディレクティブの違いについて
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
jq は html ページとデータを動的に分割する。