Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

How to add an onsen-ui modifier to javascript

  • I have the following line of code snip:

    var item = document.createElement('ons-list-item');

    I would like to add a modifier to the code so that each dynamically listed item would have a ‘chevron’. I’ve tried a variety of techniques, but I can’t get it to work. I’ve also searched stack overflow, this community, looked at the references and tutorial, but I can’t find, or maybe, understand an answer. Could some kind person show me how this is done?


  • Sorry for late reply, but may be useful for other guys.

    I think we should use ons.createElement instead, because it will compile after create.

    I write an example here.

    HTML File

      <ons-list id="example">

    Javascript File

    var items = [
      {"name": "A", "modifier": "chevron", "type":"tappable"},
      {"name": "B", "modifier": "","type":""}
    var createList = function (item) {
      var modifier = (item.modifier == "") ? "" : 'modifier="'+ item.modifier +'"';
      return ons.createElement(`
          <ons-list-item ${modifier} ${item.type}>
            <div class="center">${}</div>
    for (item of items) {
      var temp = createList(item);

    Then it will appear first list A with chevron and can tap, and list B cannot.

    Best Regards

  • In Onsen UI modifiers are applied by adding the modifier characteristic to a component!