1# Dynamic Component Creation
2
3You can dynamically add components with specified attributes and styles to pages.
4
5>  **NOTE**
6>
7>  This API is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## createElement
11
12createElement(tag: string): Element
13
14Creates a component object.
15
16**Parameters**
17
18| Name    | Type      | Mandatory  | Description     |
19| ------- | ------------ | ---- | ------- |
20| tag | string | Yes   | Component name.|
21
22**Return value**
23
24| Type       | Description           |
25| ----------- | ------------- |
26| Element | Component object corresponding to the value of **tag**.|
27
28```js
29let newImage = dom.createElement('image')
30```
31
32
33## setAttribute
34
35setAttribute(name: string, value: string): void
36
37Dynamically sets the attributes of this component.
38
39**Parameters**
40
41| Name    | Type      | Mandatory  | Description     |
42| ------- | ------------ | ---- | ------- |
43| name | string | Yes   | Attribute name.|
44| value | string | Yes   | Attribute value.|
45
46```js
47newImage.setAttribute('src', 'common/testImage.jpg')
48```
49
50
51## setStyle
52
53setStyle(name: string, value: string): boolean
54
55Dynamically sets the style of this component.
56
57**Parameters**
58
59| Name    | Type      | Mandatory  | Description     |
60| ------- | ------------ | ---- | ------- |
61| name | string |  Yes   | Style name.|
62| value | string |  Yes   | Style value.|
63
64**Return value**
65
66| Type       | Description           |
67| ----------- | ------------- |
68| boolean | Returns **true** if the setting is successful; returns **false** otherwise.|
69
70```js
71newImage.setStyle('width', '120px')
72```
73
74
75## addChild
76
77addChild(child: Element): void
78
79Adds a dynamically created component to the parent component.
80
81**Parameters**
82
83| Name    | Type      | Mandatory  | Description   |
84| ------- | ------------ | ---- | ------- |
85| child | Element | Yes   | Component object.|
86
87```js
88newDiv.addChild(newImage)
89```
90
91
92## Example
93
94```html
95<!-- xxx.hml -->
96<div class="container">
97  <div id="parentDiv" class="parent"></div>
98  <button onclick="appendDiv" class="btn">Dynamically create a <div> component.</button>
99  <button onclick="appendImage" class="btn">Dynamically create an <image> component and add it to the newly created <div> component.</button>
100</div>
101```
102
103```css
104/* xxx.css */
105.container {
106  flex-direction: column;
107  align-items: center;
108  width: 100%;
109}
110
111.parent {
112  flex-direction: column;
113}
114
115.btn {
116  width: 70%;
117  height: 60px;
118  margin: 15px;
119}
120```
121
122```js
123// xxx.js
124let newDiv = null
125let newImage = null
126
127export default {
128  appendDiv() {
129    let parent = this.$element('parentDiv')
130    newDiv = dom.createElement('div')
131    newDiv.setStyle('width', '150px')
132    newDiv.setStyle('height', '150px')
133    newDiv.setStyle('backgroundColor', '#AEEEEE')
134    newDiv.setStyle('marginTop', '15px')
135    parent.addChild(newDiv)
136  },
137  appendImage() {
138    newImage = dom.createElement('image')
139    newImage.setAttribute('src', 'common/testImage.jpg')
140    newImage.setStyle('width', '120px')
141    newImage.setStyle('height', '120px')
142    newDiv.addChild(newImage)
143  }
144}
145```
146