How to dynamicaly create ons-tabbar in page

Question

I am trying to generate tabbar pages dynamically in my app. I tried generate elements with ons.createElement() and document.createElement(). But it don't render the pages. Only tabbar, or first page and not the second. Do you know how to dynamicaly render tabbar in onsen ui?

I am using Onsen UI v2.10.8

Many thanks and have a nice day.

EDIT Last code I tried:

RenderTabButtons(view, $page, cb) {
    let data = [];
    let onsEle = `
      <ons-tab
        id="rdMainTab"
        page="rdMain.html"
        label="Main"
        icon="ion-home, material:md-home"
        active
      >
      </ons-tab>
    `;
    data.push(onsEle);
    let onsMapEle = null;
    if (view.mapVisible) {
      onsMapEle = `
        <ons-tab
          id="rdMapTab"
          page="rdDetailMap.html"
          label="Map"
          icon="ion-home, material:md-home"
        >
        </ons-tab>
      `;
      data.push(onsMapEle);
    }

    let wrap = `
      <ons-tabbar
        swipeable
        position="auto"
        id="reservation-detail-tabbar"
        class="x-margin-top"
      >`;
    for (let a = 0; a < data.length; a++) {
      wrap += data[a];
    }
    wrap += '</ons-tabbar>';

    $page[0].appendChild(ons.createElement(wrap));
    cb();
  }

Answer 1

Yes, that works fine. Just append it to the element with the class name "tab-bar" and don't forget to run ons.compile() on the element:

var $tab = $('<ons-tab  label="Label" ></ons-tab>');
$('.tab-bar').append($tab);
ons.compile($tab[0]);



<ons-tabbar>
  <ons-tab label="Tab 1" active></ons-tab>
  <ons-tab label="Tab 2"></ons-tab>
</ons-tabbar>