jQueryで要素のテキストやHTMLを変更するtext()とhtml()の使い方

2019年8月4日

jQueryでテキスト文字列やHTMLタグの取得・変更・削除を行うメソッド.text()と.html()についてまとめました。

指定した要素のテキストを取得する

要素のテキストの内容は、$(要素).text()、$(要素).html()で取得できます。

<div class="sample1">取得用のテキスト</div>

<script>
$(function(){
    var text = $('.sample1').text();
    console.log(text);
    
    var html = $('.sample1').html();
    console.log(html);
});
</script>

text()とhtml()の違い

text()で取得するテキストにはHTMLタグは含まれません。

HTMLタグを含めて取得したい場合は$(要素).html()のメソッドを使用する必要があります。

• .text()はテキストの取得・変更
• .html()はHTMLの取得・変更

<div class="sample2">
    <p>取得用のテキスト</p>
</div>

<script>
$(function(){
    //text()で取得
    var text = $('.sample2').text();
    console.log(text);
    
    //html()で取得
    var html = $('.sample2').html();
    console.log(html);
});
</script>

指定した要素が複数あった場合は連結されて取得する

指定した要素が複数存在した場合は1つのテキストとして連結されて取得します。

<ul class="ul_sample1">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

<script>
$(function(){
    //text()で取得
    var text = $('.ul_sample1').text();
    console.log(text);
    
    //html()で取得
    var html = $('.ul_sample1').html();
    console.log(html);
});
</script>

個別にそれぞれ取得し処理したい場合は、each()などの繰り返しメソッドを活用できます。

<ul class="ul_sample2">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
</ul>

<script>
$(function(){
    $('.ul_sample2 li').each(function(key, value){
        console.log( $(value).text() );
    });
});
</script>

jQueryのeachで配列や要素を繰り返す方法【サンプル有】

フォーム内のテキストの取得はval()メソッドを使用する

.text()ではフォーム内のテキストの取得はできません。

フォームの値はval()で取得・変更ができます。

<input type="text" class="textbox" value="テキスト">
<input type="button" class="textbox_check" value="テキストボックスの値を取得">

<script>
$(function(){
    $('.textbox_check').click(function(){
        alert( $('.textbox').val() );
    });
});
</script>

フォーム操作について詳しくはこちらのページをご確認ください。

jQueryでテキストボックス要素の取得・代入・イベントまとめ【サンプル有】

指定した要素のテキストを変更する

セレクタで指定した要素の中身を変更したい場合は、.text()や.html()の中に直接値を入力します。

テキストのみ変更したい場合は.text()を、HTMLタグを反映させたい場合は.html()を使用しましょう。

<div class="sample3_1">このテキスト1を変更する</div>
<div class="sample3_2">このテキスト2を変更する</div>
<input type="button" class="sample_btn3_1" value="text()でテキスト1を変更する">
<input type="button" class="sample_btn3_2" value="text()でテキスト2を変更する">
<input type="button" class="sample_btn3_3" value="html()でテキスト2を変更する">

<script>
$(function(){
    $('.sample_btn3_1').click(function(){
        $('.sample3_1').text('変更しました！');
    });
    
    //pタグ付きのテキストをtext()で挿入（タグは反映されない）
    $('.sample_btn3_2').click(function(){
        $('.sample3_2').text('<p>変更しました！</p>');
    });
    
    //pタグ付きのテキストをhtml()で挿入（タグは反映される）
    $('.sample_btn3_3').click(function(){
        $('.sample3_2').html('<p>変更しました！</p>');
    });
});
</script>

---

覚えてみればこの2つのメソッドは共通点が多く、難なく違いを覚えられると思います。

頻繁に使うメソッドなので是非身につけてください。

以上、jQueryで要素のテキストやHTMLを変更するtext()とhtml()の使い方、でした。