【javascript】createElementを使わず直接HTML書いてappendしたい

下記のように書きましたが、domは生成されずシングルクオーテーションで囲めばただのテキストで表示されます。
jQueryを使うしかないのでしょうか？

javascript
1const el = document.getElementById('test');
2    var data = `
3<div class='test'>
4<div>hoge</div>
5<div>hoge</div>
6<div>hoge</div>
7<div>hoge</div>
8<div>hoge</div>
9<div>hoge</div>
10<div>hoge</div>
11<div>hoge</div>
12</div>`;
13    el.appendChild(data);

m.ts10806

2021/05/19 07:38

>jQueryを使うしかないのでしょうか？「しかない」ことはないかと。 JavaScriptで組まれているので、jQueryで出来ることはJavascriptでもできます。

行動規範の内容に同意します

回答3件

ベストアンサー

insertAdjacentHTML() を使います。

js
1el.insertAdjacentHTML('beforeend', data);

投稿2021/05/19 07:19

int32_t

総合スコア21008

↓これを使ってみてはどうですか？

element.insertAdjacentHTML - Web API | MDN

投稿2021/05/19 07:19

Lhankor_Mhy

総合スコア36158

文字列からのHTML要素処理はあまりおすすめできませんが、手を抜くならこれでも

javascript
1<div id="test"></div>
2<script>
3const el = document.getElementById('test');
4var data = `
5<div class='test'>
6<div>hoge</div>
7<div>hoge</div>
8<div>hoge</div>
9<div>hoge</div>
10<div>hoge</div>
11<div>hoge</div>
12<div>hoge</div>
13<div>hoge</div>
14</div>`;
15el.innerHTML+=data;
16</script>