技術向上

プログラミングの学び、気になるテクノロジーやビジネストレンドを発信

createElementのあれこれ【Javascript】

createElementの使用ケース

OnsenUIのlazy loadを使用する際に使います。
私はまだこれ以外に使用した事がありません。
OnsenUIは、Javascript向けのUIライブラリで、手軽にネイティブアプリライクなUIを実現できます。

createElementを使用する事で、処理の中でHTML要素を動的に生成する事ができます。

属性の指定方法

class: {
    foo: true,
    bar: false
  },
  style: {
    color: 'red',
    fontSize: '14px'
  },
  attrs: {
    id: 'foo',
    readonly: true,
    modifier: 'quiet' //OnsenUI
  },
  props: {  //Vue.jsを想定
    myProp: 'bar'
  },
  domProps: {
    innerHTML: '<span>a</span>',
    value: 'text',
    placeholder: 'コメントを入力'
  },
  on: {
    click: this.clickHandler  //Vue.jsを想定
  }

これらはあくまで一例になります。
注意点として、指定するclassは事前に読み込まれている必要があります。

Vue.jsのv-ifとcreateElement

if文、もしくは条件 (三項) 演算子を用いて表現する事ができます。
条件演算子はdivで括った要素の中でも使う事ができるので便利です。

 createElement('div', {class: 'a-class'},[
    createElement('p', {}, '回答:'),
    this.flg == true ? createElement('p', {}, 'はい')
     : createElement('div'', {class: 'b-class'},[
            createElement('p', {}, 'いいえ'),
            createElement('p', {}, '詳細'),
            ....
        ])
  ])  


Vue.jsのv-forとcreateElement

createElementの中でも繰り返し要素を描画したい時があります。
そんな時はmapを使います。

  createElement('div', {class: 'wrap'}, array.map((item, index) => [
      createElement('div', {class: 'item'},[
          createElement('img', {attrs: { src: item.src}, class: 'u-image'}, ''),
          createElement('p', {class: 'u-name'}, item.name)
      ])
  ])


ja.onsen.io