今一度jQueryの.html()と.text()と.val()の違いを確認する

指定した要素の内容を変えるのによく使うjQueryの「.html()」と「.text()」と「.val()」。
正確に動作の違いを確認していなかったとふと思ったので、改めて整理します。

動作確認用コード

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>html text val</title>
</head>

<body>
    <!-- jQuery  -->
    <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
    
    <h1>.html()の場合</h1>
    <div class='html' value='元々のvalue値'>元々の文章</div>
    <input class='html' value='元々の文章'>

    <h1>.text()の場合</h1>
    <div class='text' value='元々のvalue値'>元々の文章</div>
    <input class='text' value='元々の文章'>

    <h1>.val()の場合</h1>
    <div class='val' value='元々のvalue値'>元々の文章</div>
    <input class='val' value='元々の文章'>

    <script>
        $('.html').html('<b>.html()では、htmlのタグが反映されて太字になる</b>');
        $('.text').text('<b>.text()では、htmlのタグは文字として認識</b>');
        $('.val').val('.val()では、valueの値を書き換える');
    </script>
        
</body>

</html>

実行結果

ブラウザ表示内容

f:id:narunaru7638:20190413000550p:plain

開発ツール内容

f:id:narunaru7638:20190413000604p:plain

・.html()をdivタグに対して実施した場合、htmlのタグが反映されて太字になった上で、表示内容が変わる
・.html()をinputタグに対して実施した場合、画面上は反映されず、表示されている表示内容は変わらない
(開発ツールで確認すると反映はされているが、inputタグの仕様で画面上は見えない)

・.text()をdivタグに対して実施した場合、htmlのタグは文字として認識された上で、表示内容が変わる
・.text()をinputタグに対して実施した場合、画面上は反映されず、表示内容は変わらない
(開発ツールで確認すると反映はされているが、inputタグの仕様で画面上は見えない)

・.val()をdivタグに対して実施した場合、表示内容は変わらない
(divタグは元々オプションでvalueを持っていないため、開発ツールで確認しても反映されていない。)
・.val()をinputタグに対して実施した場合、valueの値が置き換わり、表示内容が変わる