OnsenUIが挿入した要素に適用されない

Question

前提・実現したいこと

MonacaでOnsenUIを利用してアプリを作っていて、出た値(乱数)を表示させたいです。
値を出した後、<ons-list-item>要素を挿入するとただのテキストのように表示されてしまいました。
適用される方法、もしくは別手段をご教授願います。

###発生している問題

result = [1, 2, 3, 4, 5]として

 Result
 1
 2
 3
 4
 5

となってほしいのですが

 Result
12345

となってしまいます。

該当のソースコード

const resultBox = document.getElementById('result');
result.forEach(function(item){
const element = '<ons-list-item>' + item + '</ons-list-item>';
  resultBoxresultBox.insertAdjacentHTML('beforeEnd', element);
})

<ons-list>
  <ons-list-header>Result</ons-list-header>
  <div id="result"></div>
</ons-list>

試したこと

elementの中身を引数を使わず、文字列リテラルで置き換えたところ、こちらも同じようにただのテキストのようになってしまいました。(下記コード)

const element = '<ons-list-item>Item</ons-list-item>'

この箇所前後のコードに誤りはありませんでした。

補足情報（FW/ツールのバージョンなど）

前述のとおりMonacaにて、OnsenUIを使用しています。
動作はAndroid版のMonaca Debbuggerで確認しています。

Answer 1

この形でどうでしょうか。

<ons-list>
	<ons-list-header>Result</ons-list-header>
</ons-list>

<script>
let result = [1, 2, 3, 4, 5];
let elem_list = document.querySelector('ons-list');
result.forEach(function(item){
	// 空の<ons-list-item>を作成
	let elem_list_item = document.createElement('ons-list-item');
	// 表示する値を追加
	elem_list_item.innerText = item;
	// 親要素に追加
	elem_list.appendChild(elem_list_item);
})
</script>

参考: HTML/CSS/JavascriptでAndroid/iOSアプリをつくる

Comments

[atamayara]

ありがとうございます。期待通り動作しました。