Monaca Onsen UI Discord Chat Github Repo

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!