jQueryのhtmlメソッドとtextメソッドでハマったこと
jQueryのhtmlメソッドとtextメソッドでハマったこと
jQueryのhtmlメソッドとtextメソッドでハマったことがあったので、こちらにまとめます。
上記の[合計の料理時間は?]をクリックすると、非同期通信により以下ファイルがブラウザにレスポンスされるようにしている。
[app/views/cooking_informations/calculate_cooking_time.js.erb] let result_calculate_html = ` 料理時間の合計: <%= @handle_total_time %><br> 捌く時間の合計: 10<br> 調理時間の合計: 30<br> `; $("#js-result-calculate-cooking-time").text(result_calculate_html);
実際にクリックすると以下のようになり、htmlタグが文字として読み込まれてしまう。
これは、jQueryでtextメソッドを使っているため、htmlタグも文字として認識してしまう為である。
下記のようにjQueryでhtmlメソッドを使うと、引数の中がhtmlタグとして認識される為、期待通りの動きとなる。
[app/views/cooking_informations/calculate_cooking_time.js.erb] let result_calculate_html = ` 料理時間の合計: <%= @handle_total_time %><br> 捌く時間の合計: 10<br> 調理時間の合計: 30<br> `; $("#js-result-calculate-cooking-time").html(result_calculate_html);