こんにちは、なっちる先生（@nacchi_jagariko）です。
現在、フリーランスエンジニアとして働いています。
今回は、jQueryでのhtml()・text()の操作方法についてにまとめて行きます！
タブや改行をつける方法も簡単に紹介します〜。
この記事は以下のような人向けです。
html()・text()の操作方法をまとめたい！！！
それでは参りましょう〜。
html()とtext()の違い
まず、html()とtext()の違いについて話します。
元となるHTMLは以下として、説明していきます。
|
1 2 3 4 5 6 7 8 9 |
/* text()で操作するhtml */ <div class="container_text"> <p>テキスト入ります</p> </div> /* html()で操作するhtml */ <div class="container_html"> <p>テキスト入ります</p> </div> |
text()
text()は指定した要素の「テキスト」を取得するコードになります。
例えば、
|
1 |
$('.container_text').text() |
で取得できるものは、
|
1 |
テキスト入ります |
になります。
また、text()のかっこ内の引数は「文字列」として指定した要素に置き換えられることになります。
html()
html()は指定した要素の「HTML」を取得するコードになります。
例えば、
|
1 |
$('.container_html').html() |
で取得できるものは、
|
1 |
<p>テキスト入ります</p> |
になります。
また、html()のかっこ内の引数は、HTML文として指定した要素に置き換えられることになります。
文字はtext()、コードはhtml()、簡単だね！！
取得・置き換え・追加
html()もtext()も、使い方は同じなので「追加・取得・書き換え」の方法をまとめて紹介していきます〜。
なお、元となるHTMLは上と同じく、以下のコードとして話を進めていきます。
|
1 2 3 4 5 6 7 8 9 |
/* text()で操作するhtml */ <div class="container_text"> <p>テキスト入ります</p> </div> /* html()で操作するhtml */ <div class="container_html"> <p>テキスト入ります</p> </div> |
取得
取得方法
取得する方法は、()だけで完了します。
|
1 2 3 4 5 |
// textの取得 $('.container_text').text() // htmlの取得 $('.container_html').html() |
これが基礎になるよ〜
取得結果
取得結果は以下になります。
|
1 2 3 4 5 |
/* text()取得結果 */ テキスト入ります /* html()取得結果 */ <p>テキスト入ります</p> |
（以下参考）
See the Pen mggEmp by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
console.log()とよく使えるね
書き換え
置き換え方法
置き換える方法は、各々()内に引数として書き換えたい文字列またはHTML文を入れればOKです。
|
1 2 3 4 5 6 7 8 |
var text = 'テキストに置き換えました'; var html = '<p>テキストに置き換えました</p>' // textの置き換え $('.container_text').text(text); // htmlの置き換え $('.container_html').html(html); |
置き換え結果
置き換え結果は以下になります。
|
1 2 3 4 5 6 7 8 9 |
/* text()で操作するhtml */ <div class="container_text"> テキストに置き換えました </div> /* html()で操作するhtml */ <div class="container_html"> <p>テキストに置き換えました</p> </div> |
container_textのpタグはなくなった結果になります。
（以下参考）
See the Pen zXXqrm by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
追加
追加方法
ただ、引数を入れるだけでは、置き換わってしまいます。
なので、追加したい場合には、引数に「取得したもの」と「追加するもの」を入れて対処します。
|
1 2 3 4 5 6 7 8 |
var text = 'テキストを追加しました'; var html = '<p>テキストを追加しました</p>' // textの追加 $('.container_text').text($('.container_text').text() + text); // htmlの追加 $('.container_html').html($('.container_html').html() + html); |
追加結果
追加した結果は以下になります。
|
1 2 3 4 5 6 7 8 9 |
/* text()で操作するhtml */ <div class="container_text"> テキスト入ります テキストを追加しました </div> /* html()で操作するhtml */ <div class="container_html"> <p>テキスト入ります</p><p>テキストを追加しました</p> </div> |
text()で取得したものは文字列になるので、pタグはなくなります。
（以下参考）
See the Pen ROOaja by なっちる先生@もっちるの先生 (@nacchi_jagariko) on CodePen.
おまけ：タブや改行もつけたい！
html()内で綺麗なコードを挿入するために、改行やタブも含めたhtmlを入れたい場合もあると思います。
そんなときには、正規表現を使いましょう。
改行コード
改行は正規表現を使って、以下のように表します。
|
1 2 |
/* 改行 */ \r\n |
タブコード
タブは正規表現を使って、以下のように表します。
|
1 2 |
/* タブ */ \t |
使用例
|
1 2 3 4 5 |
var html ='\r\n\t'+ '<p>テキストを追加しました</p>' // htmlの追加 $('.container_html').html($('.container_html').html() + html); |
これで追加した場合も、きれいなコードが保てます🎵
まとめ
以上、text()とhtml()の操作手法の総復習でした〜。
これさえ押さえておけばtext()とhtml()はバッチリです！
その他いろいろなコードを組み合わせて、素敵なシステムを作ってください〜。
以上で、なっちる先生の授業を終わります。
ステキなプログラミングライフを！
参考
