javascript: insertAdjacentHTMLのHTMLの書き方について知りたい

Question

#実現したいこと
insertAdjacentHTMLを使用してAjaxで取得したデータをviewに出力したい。

#困っていること
divにclassを含めて書くときに、ダブルクォーテーションを書く必要があるのですが、それがjsのダブルクォーテーションとバッティングしてエラーになってしまいます。
私なりに、いろいろ考えてみたのですがどうしても解決することが出来なかったのでご教示いただけると幸いです。

var element = document.getElementById("data");
element.insertAdjacentHTML(beforeend, "<div class="row data_count"><div class="col py-2 border-bottom"><div class="user-name">${data.text} </div><div class="content">${data.text}</div></div></div>");

Answer 1

どちらかをシングルクォーテーションにするかエスケープ入れてください。
いずれにしてもそのまま変数を突っ込むことはできないのでどうしても+でつなぎたくないのでしたらテンプレート文字列でしょうか。

Answer 2

var element = document.getElementById("data");
element.insertAdjacentHTML(beforeend, '<div class="row data_count"><div class="col py-2 border-bottom"><div class="user-name">${data.text} </div><div class="content">${data.text}</div></div></div>');