<script>
function CreateButton(ParentID, Name, Caption){
$("#" + ParentID).append("<ons-button id=\"" + Name + "\">" + Caption + "</ons-button>");
}

</script>


<ons-tabbar id="tabbar" swipeable>
    <ons-tab page="page1.html" active><ons-icon icon="fa-user-astronaut"></ons-icon></ons-tab>
    <ons-tab page="page2.html"><ons-icon icon="fa-rocket"></ons-icon></ons-tab>
    <ons-tab page="page3.html"><ons-icon icon="fa-star"></ons-icon></ons-tab>
</ons-tabbar>

<template id="page1.html">
  <ons-page>

<div id="mainpane">
<ons-row>
<ons-col id="col1" style="width: 10px;"> Hello World! This is column one!</ons-col>
<ons-col id="col2" style="">Hello World! This is column one!</ons-col>
</ons-row>

<script>
CreateButton("col1", "myButton1", "Hello");
CreateButton("col2", "myButton2", "Hello");

</script>

</div>

   </ons-page>
</template>

<template id="page2.html">
<ons-page>
<h2>TITLE</h2>

CONTENT

</ons-page>
</template>

<template id="page3.html">
<ons-page>
<h2>TITLE</h2>

CONTENT

</ons-page>
</template>