title: how to append text in ons template in onsen ui using javascript
body: <p>I am new in onsen UI I want to append some data to  when template is loaded by click or load function </p>
  
  <p>I am tried it using Javascript and jquery but it did not work</p>
  
  <p>please help </p>
  
  <p>Thanks in advance</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;body&gt;
      &lt;ons-navigator var="myNavigator"&gt;
  
  
    &lt;ons-page&gt;
      &lt;ons-toolbar&gt;
        &lt;div class="center" &gt;&lt;img src="img/logo-sg.jpg" /&gt;&lt;/div&gt;
      &lt;/ons-toolbar&gt;
      &lt;div style="text-align: center"&gt;
        &lt;br&gt;
         &lt;p  &gt;'Im building an app where I have the first 3 pages (login, register and password recover) without toolbar and sliding-menu. Inside of my app (logged pages) I want to provide the slide-menu, but I'm not achiving this goal. How can I do it?&lt;/p&gt;
        &lt;ons-button modifier="light" onclick="myNavigator.pushPage('login.html', { animation : 'slide' } )"&gt;
         Login Page
        &lt;/ons-button&gt;
      &lt;/div&gt;
    &lt;/ons-page&gt;
  &lt;/ons-navigator&gt;
      &lt;ons-template id="login.html"&gt;
    &lt;ons-page&gt;
       &lt;ons-page&gt;
        &lt;ons-toolbar&gt;
          &lt;div class="center"&gt;Log In&lt;/div&gt;
          &lt;div class="right"&gt;&lt;ons-toolbar-button&gt;Close&lt;/ons-toolbar-button&gt;&lt;/div&gt;
        &lt;/ons-toolbar&gt;
  
        &lt;div class="login-form"&gt;
  
          &lt;input type="email" id="uname" class="text-input--underbar" placeholder="Email" value=""&gt;
          &lt;input type="password" id="pass" class="text-input--underbar" placeholder="Password" value=""&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;ons-button modifier="large" id="btnSubmit"  onclick="SignIn();" class="login-button"&gt;Log In&lt;/ons-button&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;ons-button modifier="quiet" onclick="#" class="forgot-password"&gt;Forgot password?&lt;/ons-button&gt;
          &lt;ons-button modifier="quiet" onclick="myNavigator.pushPage('signup.html', { animation : 'slide' } )" class="forgot-password"&gt;SignUp&lt;/ons-button&gt;
          &lt;div style="text-align: center"&gt;
        &lt;br /&gt;
        &lt;ons-button modifier="light" onclick="myNavigator.popPage()"&gt;
          Back to Home
        &lt;/ons-button&gt;
      &lt;/div&gt;
        &lt;/div&gt;
  
  
  
  
    &lt;/ons-page&gt;
  &lt;/ons-template&gt;
      &lt;ons-template id="signup.html"&gt;
  
      &lt;ons-page&gt;
        &lt;ons-toolbar&gt;
          &lt;div class="left"&gt;&lt;ons-back-button&gt;Back&lt;/ons-back-button&gt;&lt;/div&gt;
          &lt;div class="center"&gt;Sign up&lt;/div&gt;
        &lt;/ons-toolbar&gt;
  
        &lt;div class="formarea"&gt;
          &lt;div class="form-row"&gt;
            &lt;input type="text"  id="txtName" class="signup text-input--underbar width-full" placeholder="Name" value=""&gt;
  
          &lt;/div&gt;
  
          &lt;div class="form-row"&gt;
            &lt;input type="text" id="txtNewUserName" class="signup text-input--underbar width-full" placeholder="Email" value=""&gt;
          &lt;/div&gt;
  
          &lt;div class="form-row"&gt;
            &lt;input type="password" id="txtNewPassword" class="text-input--underbar width-full" placeholder="Password" value=""&gt;
          &lt;/div&gt;
  
          &lt;div class="lucent"&gt;
            &lt;p class="note"&gt;Password - 6 characters or more&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class="vspc form-row"&gt;
            &lt;ons-button modifier="large--cta" onclick="SignUp();" &gt;Sign up&lt;/ons-button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/ons-page&gt;
  
      &lt;/ons-template&gt;
      &lt;ons-template id="dashbord.html"&gt;
  
      &lt;ons-page&gt;
      &lt;input type="hidden" id="hfDasId" /&gt;
        &lt;ons-toolbar&gt;
          &lt;div class="left"&gt;&lt;ons-back-button&gt;Back&lt;/ons-back-button&gt;&lt;/div&gt;
          &lt;div class="center"&gt;MENU&lt;/div&gt;
             &lt;div class="right"&gt;&lt;ons-button onclick="RedirectCart()"&gt;&lt;img src="img/cart.png" onload="cartValue()" /&gt;(&lt;span class="CartCount"&gt;&lt;/span&gt;)&lt;/ons-button&gt;&lt;/ons-tab&gt;&lt;/div&gt;
        &lt;/ons-toolbar&gt;
        &lt;ons-row&gt;
  
  
  
  
      &lt;ons-col &gt;&lt;ons-button class="nobackgroud"  onclick="RedirectPurch()"&gt;&lt;img src="img/my-account.jpg"&gt;&lt;/ons-button&gt;&lt;/ons-col&gt;
      &lt;ons-col&gt;&lt;ons-button class="nobackgroud"  onclick="RedirectPurch()"&gt;&lt;img src="img/purchase.jpg" &gt;&lt;/ons-button&gt;&lt;/ons-col&gt;
  
    &lt;/ons-row&gt;
     &lt;ons-row&gt;
      &lt;ons-col&gt;&lt;ons-button class="nobackgroud"    onclick="RedirectPurch()"&gt;&lt;img src="img/switch.jpg" &gt;&lt;/ons-button&gt;&lt;/ons-col&gt;
      &lt;ons-col&gt;&lt;ons-button class="nobackgroud"   onclick="RedirectPurch()"&gt;&lt;img src="img/redemption.jpg" &gt;&lt;/ons-button&gt;&lt;/ons-col&gt;
        &lt;/ons-row&gt;
        &lt;ons-row&gt;
      &lt;ons-col&gt;&lt;ons-button class="nobackgroud"   onclick="RedirectPurch()"&gt;&lt;img src="img/account-statement.jpg" &gt;&lt;/ons-button&gt;&lt;/ons-col&gt;
      &lt;ons-col&gt;&lt;ons-button class="nobackgroud"   onclick="RedirectPurch()"&gt;&lt;img src="img/chanhe-pin.jpg" &gt;&lt;/ons-button&gt;&lt;/ons-col&gt;
        &lt;/ons-row&gt;
      &lt;/ons-page&gt;
  
      &lt;/ons-template&gt;
      &lt;ons-template id="purchase.html"&gt;
  
      &lt;ons-page&gt;
      &lt;input type="hidden" id="hfId" /&gt;
        &lt;ons-toolbar&gt;
          &lt;div class="left"&gt;&lt;ons-back-button&gt;Back&lt;/ons-back-button&gt;&lt;/div&gt;
          &lt;div class="center"&gt;MENU&lt;/div&gt;
          &lt;div class="right"&gt;&lt;ons-button onclick="RedirectCart()"&gt;&lt;img src="img/cart.png" onload="cartValue()" /&gt;(&lt;span class="CartCount"&gt;&lt;/span&gt;)&lt;/ons-button&gt;&lt;/ons-tab&gt;&lt;/div&gt;
        &lt;/ons-toolbar&gt;
  
  
    &lt;table&gt;
      &lt;tr&gt;
      &lt;td&gt;Scheme Type &lt;/td&gt;
      &lt;td&gt;
          &lt;select id="ddlSchemeType" &gt;
              &lt;option value="Equity"&gt;Equity&lt;/option&gt;
              &lt;option value="Redem"&gt;Redem&lt;/option&gt;
  
          &lt;/select&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;
      Plan 
      &lt;/td&gt;
      &lt;td&gt;
      &lt;div class="button-bar" style="width:200px; margin:8px auto 0;"&gt;
                &lt;div class="button-bar__item"&gt;
                  &lt;input type="radio" name="Plan" checked&gt;
                  &lt;div class="button-bar__button"&gt;Direct&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="button-bar__item"&gt;
                  &lt;input type="radio" name="Plan"&gt;
                  &lt;div class="button-bar__button"&gt;Regular&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
       &lt;tr&gt;
      &lt;td&gt;Scheme  &lt;/td&gt;
      &lt;td&gt;
          &lt;select id="ddlScheme"&gt;
              &lt;option value="Kotak"&gt;Kotak&lt;/option&gt;
              &lt;option value="ICICI"&gt;ICICI&lt;/option&gt;
          &lt;/select&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;
      Dividend 
      &lt;/td&gt;
      &lt;td&gt;
      &lt;div class="button-bar" style="width:200px; margin:8px auto 0;"&gt;
                &lt;div class="button-bar__item"&gt;
                  &lt;input type="radio" name="Dividend" checked&gt;
                  &lt;div class="button-bar__button"&gt;Reinvest&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="button-bar__item"&gt;
                  &lt;input type="radio" name="Dividend"&gt;
                  &lt;div class="button-bar__button"&gt;PayOut&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
        &lt;tr&gt;
      &lt;td&gt;
      Amount($) 
      &lt;/td&gt;
      &lt;td&gt;
     &lt;input type="text" id="txtAmt"  class="text-input--underbar width-full"  /&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
      &lt;td&gt;Payout bank &lt;/td&gt;
      &lt;td&gt;
          &lt;select id="ddlPayoutBank"&gt;
              &lt;option value="ICICI"&gt;ICICI&lt;/option&gt;
              &lt;option value="PNB"&gt;PNB&lt;/option&gt;
              &lt;option value="SBI"&gt;SBI&lt;/option&gt;
              &lt;option value="HDFC"&gt;HDFC&lt;/option&gt;
          &lt;/select&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;&lt;/tr&gt;
      &lt;tr&gt;
      &lt;td style="padding:0px;" &gt;
     &lt;ons-button modifier="large" onclick="purchase();" &gt;Submit&lt;/ons-button&gt;
  
  
      &lt;/td&gt;
      &lt;td style="padding:0px;" &gt;
     &lt;ons-button modifier="large" &gt;Reset&lt;/ons-button&gt;
  
      &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;/table&gt;
  
  
      &lt;/ons-page&gt;
  
      &lt;/ons-template&gt;
      &lt;ons-template id="cart.html"&gt;
  
      &lt;ons-page id="cart"&gt;
  
        &lt;ons-toolbar&gt;
          &lt;div class="left"&gt;&lt;ons-back-button&gt;Back&lt;/ons-back-button&gt;&lt;/div&gt;
          &lt;div class="center"&gt;Cart&lt;/div&gt;
          &lt;div class="right"&gt;&lt;img src="img/blank.png" onload="CartDetail()" /&gt; &lt;/div&gt;
        &lt;/ons-toolbar&gt;
        &lt;a id="ab" href="#"&gt;&lt;/a&gt;
        &lt;table id="product"&gt; &lt;/table&gt; 
  
  
       &lt;div id="tblProduct" style="display: none;" &gt;
  
          &lt;table&gt;
  
  
  
              &lt;tr class="data"&gt;
  
                  &lt;td class="Scheme"&gt;
                  &lt;/td&gt;
                  &lt;td class="Amount"&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input id="btnDelete" type="button" value="Delete" /&gt;
                  &lt;/td&gt;
  
  
              &lt;/tr&gt;
  
          &lt;/table&gt;
  
      &lt;/div&gt;
  
  
      &lt;/ons-page&gt;
  
      &lt;/ons-template&gt;
  &lt;/body&gt; 
  </code></pre>
  
  <p><strong>jquery</strong></p>
  
  <pre><code>CartDetail = function () {
   var prod = $('#product');
                  $.ajax({
                      url: "http://localhost:60595/api/purchase/?userId=" + parseFloat($("#hfDasId").val()), //local
                      type: "GET",
                      contentType: "json",
                      success: function (data) {
                          $.each(data, function (index, Purchase) {
  
  
  
                              var $row = $('#tblProduct').find('.data').clone().attr("id", "row_" + Purchase.Id);
                              $row.find(".Scheme").html(Purchase.Scheme);
                              $row.find(".Amount").html(Purchase.Amount);
                              $row.find("#btnDelete").click(function () {
  
  
                                  $.ajax({
  
                                      url: "http://localhost:60595/api/purchase/" + Purchase.Id, //local
                                      type: "PUT",
                                      success: function () {
  
                                          $row.remove();
                                      },
                                      error: function (jqXHR, exception) {
                                          alert(Purchase.Id);
                                          if (jqXHR.status === 0) {
                                              alert('Not connect.\n Verify Network.');
                                          } else if (jqXHR.status == 404) {
                                              alert('Requested page not found. [404]');
                                          } else if (jqXHR.status == 500) {
                                              alert('Internal Server Error [500].');
                                          } else if (exception === 'parsererror') {
                                              alert('Requested JSON parse failed.');
                                          } else if (exception === 'timeout') {
                                              alert('Time out error.');
                                          } else if (exception === 'abort') {
                                              alert('Ajax request aborted.');
                                          } else {
                                              alert('Uncaught Error.\n' + jqXHR.responseText);
                                          }
                                      }
  
                                  });
  
                              });
                              prod.append($row);
                          });
  
                      }
  
  
                  });
  
              }
  </code></pre>