jQueryのhtmlメソッドとtextメソッドでハマったこと

jQueryのhtmlメソッドとtextメソッドでハマったこと
jQueryのhtmlメソッドとtextメソッドでハマったことがあったので、こちらにまとめます。

Image from Gyazo

上記の[合計の料理時間は?]をクリックすると、非同期通信により以下ファイルがブラウザにレスポンスされるようにしている。

[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タグが文字として読み込まれてしまう。

Image from Gyazo

これは、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);

Image from Gyazo

参考記事

HTMLタグが文字列として表示されてしまう

変数でHTMLを指定し動的に生成する(jQuery編)

JavaScriptで文字列を複数行に分けて記述する方法 | プロカツ!