Dynamic Component Creation

You can dynamically add components with specified attributes and styles to pages.

NOTE

This API is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

createElement

createElement(tag: string): Element

Creates a component object.

Parameters

Name	Type	Mandatory	Description
tag	string	Yes	Component name.

Return value

Type	Description
Element	Component object corresponding to the value of tag.

let newImage = dom.createElement('image')

setAttribute

setAttribute(name: string, value: string): void

Dynamically sets the attributes of this component.

Parameters

Name	Type	Mandatory	Description
name	string	Yes	Attribute name.
value	string	Yes	Attribute value.

newImage.setAttribute('src', 'common/testImage.jpg')

setStyle

setStyle(name: string, value: string): boolean

Dynamically sets the style of this component.

Parameters

Name	Type	Mandatory	Description
name	string	Yes	Style name.
value	string	Yes	Style value.

Return value

Type	Description
boolean	Returns true if the setting is successful; returns false otherwise.

newImage.setStyle('width', '120px')

addChild

addChild(child: Element): void

Adds a dynamically created component to the parent component.

Parameters

Name	Type	Mandatory	Description
child	Element	Yes	Component object.

newDiv.addChild(newImage)

Example

<!-- xxx.hml -->
<div class="container">
  <div id="parentDiv" class="parent"></div>
  <button onclick="appendDiv" class="btn">Dynamically create a <div> component.</button>
  <button onclick="appendImage" class="btn">Dynamically create an <image> component and add it to the newly created <div> component.</button>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.parent {
  flex-direction: column;
}

.btn {
  width: 70%;
  height: 60px;
  margin: 15px;
}

// xxx.js
let newDiv = null
let newImage = null

export default {
  appendDiv() {
    let parent = this.$element('parentDiv')
    newDiv = dom.createElement('div')
    newDiv.setStyle('width', '150px')
    newDiv.setStyle('height', '150px')
    newDiv.setStyle('backgroundColor', '#AEEEEE')
    newDiv.setStyle('marginTop', '15px')
    parent.addChild(newDiv)
  },
  appendImage() {
    newImage = dom.createElement('image')
    newImage.setAttribute('src', 'common/testImage.jpg')
    newImage.setStyle('width', '120px')
    newImage.setStyle('height', '120px')
    newDiv.addChild(newImage)
  }
}