与onsen-ui的javascript:动态添加元素

时间:2015-08-02 08:37:18

标签: javascript onsen-ui

我想在已经定义的onsen-ui元素中添加一些html元素,有时它可以工作,有时候它不会,但是确实有一些代码部分出现问题但是我没有用无法确定问题。

这是我的代码:

<ons-template id="presentation.html">
      <ons-page id ="pre">
        <ons-toolbar>
          <div class="left">
            <ons-toolbar-button onclick="menu.toggleMenu()">
             <img src = "img/icon.png"/>
            </ons-toolbar-button>
          </div>
          <div class="center">mysql content</div>
        </ons-toolbar>

        <h1 style="text-align: center" id= "content">Page2</h1>


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


<ons-template id="menu.html">
  <ons-list id = "list">
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('home.html', {closeMenu: true});
                                              getPageContent(1);
                                             ">

      Presentation 1
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('presentation.html', {closeMenu: true});
                                               loadPresentation(0);
                                              ">
      Presentation Mysql
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page2.html', {closeMenu: true});
                                               ">
      Test
    </ons-list-item>
  </ons-list>
</ons-template>


<script>
ons.ready(function() {

  menu.on('postclose', function() {
    loadPresentation(0);
    addElement();
});
</script>

这是我的javascript:

function loadPresentation(id){
 var p = document.createElement('p');
           p.innerHTML = "content test";
           var onspage = document.getElementById("pre");
           onspage.appendChild(p);

}

当我这样做时

var onspage = document.getElementById("content");
               onspage.appendChild(p);

它有效。但是我的元素被添加了两次。

此代码也可以正常工作:

var instaItem = document.createElement('ons-list-item');
  instaItem.setAttribute('modifier', "chevron");
    instaItem.setAttribute('onclick', "");

  instaItem.innerHTML = "press me";
  document.getElementById("list").appendChild(instaItem);

任何帮助人员?

0 个答案:

没有答案