要素内のテキストコンテンツまたはHTMLの一部だけを編集することはできますか？

Question

以下のコードは、テキスト行全体を書き換えてHTML要素内のテキストを正しく変更します。これはtextContentを使用して達成されますが、innerHTMLもこれを行うことができます。

document.querySelectorAll(".box")[0].textContent = 'The number of dollars in my bank account is $1';

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
\t 
 
.box { 
 
    padding: 10px; 
 
    font-size: 2rem; 
 
    color: white; 
 
    font-family: sans-serif; 
 
    background-color: blue; 
 
}

<div class="box">The number of dollars in my bank account is ?</div>

しかし、行全体を書き換えることなく、テキストの一部だけを変更する方法はありますか？これはおそらく正確ではなく、.innerHTML [5、10]のようなもので、特にターゲットを絞った文字だけを変更します。

エレメント内のテキストやタグを変更するのにJavascriptを使用すると、セクション全体が常に書き換えられます。これはユーザーには見えないかもしれませんが、常にシーンの後ろに何が起こるのでしょうか？本当にありがとう！

document.getElementById('amount').innerHTML = '5$'; 

だからあなたのウェブサイトが表示されます：

Answer 1

はるかに優れたアプローチは、その後、あなたが簡単にjsでちょうど量を変更することができます

<div class="box">The number of dollars in my bank account is <span id='amount'></span>.</div> 

ような何かにあなたのHTMLを変更することであろう私の銀行口座のドルは5 $です。

あなたのアプローチに固執したいのであれば、コンテンツ全体を文字列に保存してから、部分文字列、フィルター、または正規表現のいずれかで検索を行うだけです。次に、必要な要素を置き換えて、文字列をHTMLに戻します。

Answer 2

ドルの金額を表示するには、ネストされたスパンタグを使用します。次に、スパンのテキストを更新するだけです。文全体が必要なときは、div.boxのtextContentにアクセスするだけです。連結されたすべてのネストされた要素のtextContentを返します。