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) ]) ])