例1 inputタグ内の文字を更新する場合
<input type="text" class="form-control" id="ex1" value="更新前の文字列">
↓
<input type="text" class="form-control" id="ex1" value="更新後の文字列">
$('#ex1').val('変更後の文字列');
例2 h3タグ内の文字を更新する場合
<h3 id="ex2">更新前の文字列</h3> → <h3 id="ex2">更新後の文字列</h3>
$('#ex2').html('変更後の文字列');
例3 textareaタグ内の文字を更新する場合
<textarea id="ex3">変更前の文字列</textarea> → <textarea id="ex3">変更後の文字列</textarea>
$('#ex3').html('変更後の文字列');
こんな感じで、開始/終了タグの間の文字を更新する際は、$(対象エレメント).html(設定したい文字);。
value=""の値を更新する際は、$(対象エレメント).val(設定したい文字);と覚えている方も多いと思います。
最新のブラウザを使っていれば、普段はこれでまったく問題ありません。
ブラウザの「戻るボタン」や、「Javascript:history.back();」でひとつ先のページから元ページに戻った時、ようは、キャッシュ内のページを表示した際、上記の例3のバターンの場合のみ意図した動作になりません。
詳しく書くと、FirebugなどのデバッガーやJavascriptで値を確認すると、意図通りに値が更新されているのですが、画面上の表示が更新されない問題がでます。
正常ルートでは発生しない問題のため、テスト段階で確認が漏れてしまう可能性が大いにあります。
<textarea></textarea>でも、<input type="text" class="form-control" value="" />と同じように、エレメント.val('');を使って更新します。
Javascriptの場合はエレメント.innerHTML = '';ではなくエレメント.value = '';を使います。
<textarea id="ex3">変更前の文字列</textarea> → <textarea id="ex3">変更後の文字列</textarea>
$('#ex3').val('変更後の文字列');