【Monaca:OnsenUI】insertAdjacentHTMLでons-list-itemをforループする方法

Question

【実現したいこと】
タイトルの通り、ons-list-itemをinsertAdjacentHTMLでforを使用したループ処理をしたいです。（配列を１つずつons-list-itemとして表示）

【試したこと】

  <ons-template id="tab3.html">
    <ons-page id="third-page">

      <div style="text-align:center; ">
        <ons-button onclick="btn_test();" style="margin-top:30px;">test_button</ons-button>
      </div>

      <ons-list id="ons-list">
      </ons-list>

    </ons-page>
  </ons-template>

var arr = ["黒" , "金" , "赤" , "黄緑" , "青" , "紫"];
var list = "";  
function btn_test(){
  for(var i = 0; i < arr.length; i++){
     list += "<ons-list-item>" + arr[i] + "</ons-list-item>";
  }
  document.getElementById('ons-list').insertAdjacentHTML('afterbegin' , list);
}

・innerHTMLだと正しく配列ずつ表示されました。
・ons-list-itemではなく、ons-listをdivに変更しliタグでinsertAdjacentHTML()を実行したところ、正常に表示されました。

回答よろしくお願いします。

Answer 1

自己解決しました
ons-list-itemタグにそれぞれデフォルトのclassを付与したところ、無事正常に表示されました。innerHTMLだとclass名とdivが自動的に付与されるのに対して、insertAdacentHTMLは手動で入力しないといけないみたいです。

var arr = ["黒" , "金" , "赤" , "黄緑" , "青" , "紫"];
var list = "";
function btn_test2(){
  
  for(var i = 0; i < arr.length; i++){
     list += '<ons-list-item class="list-item"><div class="center list-item__center">' + arr[i] + '</div></ons-list-item>'
     
  }
    document.getElementById('ons-list').insertAdjacentHTML('afterbegin' , list);
}

Comments

[otak-lab]

ons-list・ons-list-itemではなく、ul・liを使ってclassを指定した方がよろしいかと思います。
https://ja.onsen.io/v2/api/css.html#list-category

[todayyy]

otak-labさんコメントありがとうございます！そうなんですね！ありがとうございます！勉強になりました！