• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 动态创建组件
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @seaside_wu1-->
5<!--Designer: @shiyu_huang-->
6<!--Tester: @TerryTsao-->
7<!--Adviser: @HelloCrease-->
8
9提供在页面中动态添加组件，并为动态添加的组件设置属性与样式的能力。
10
11>  **说明：**
12>
13> - 从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
14
15
16## createElement
17
18createElement(tag: string): Element
19
20创建一个组件对象。
21
22**参数：**
23
24| 参数名     | 类型       | 必填   | 说明      |
25| ------- | ------------ | ---- | ------- |
26| tag | string | 是    | 组件名称。 |
27
28**返回值：**
29
30| 类型        | 说明            |
31| ----------- | ------------- |
32| Element | 对应tag名称的组件对象。 |
33
34```js
35let newImage = dom.createElement('image')
36```
37
38
39## setAttribute
40
41setAttribute(name: string, value: string): void
42
43动态设置组件的属性。
44
45**参数：**
46
47| 参数名     | 类型       | 必填   | 说明      |
48| ------- | ------------ | ---- | ------- |
49| name | string | 是    | 属性名称。 |
50| value | string | 是    | 属性值。 |
51
52```js
53newImage.setAttribute('src', 'common/testImage.jpg')
54```
55
56
57## setStyle
58
59setStyle(name: string, value: string): boolean
60
61动态设置组件的样式。
62
63**参数：**
64
65| 参数名     | 类型       | 必填   | 说明      |
66| ------- | ------------ | ---- | ------- |
67| name | string |  是    | 样式名称。 |
68| value | string |  是    | 样式值。 |
69
70**返回值：**
71
72| 类型        | 说明            |
73| ----------- | ------------- |
74| boolean | 设置成功时返回true，失败时返回false。 |
75
76```js
77newImage.setStyle('width', '120px')
78```
79
80
81## addChild
82
83addChild(child: Element): void
84
85将动态创建的组件添加到父组件当中。
86
87**参数：**
88
89| 参数名     | 类型       | 必填   | 说明    |
90| ------- | ------------ | ---- | ------- |
91| child | Element | 是    | 组件对象。 |
92
93```js
94newDiv.addChild(newImage)
95```
96
97
98## 示例
99
100```html
101<!-- xxx.hml -->
102<div class="container">
103  <div id="parentDiv" class="parent"></div>
104  <button onclick="appendDiv" class="btn">动态创建div</button>
105  <button onclick="appendImage" class="btn">动态创建image到创建的div中</button>
106</div>
107```
108
109```css
110/* xxx.css */
111.container {
112  flex-direction: column;
113  align-items: center;
114  width: 100%;
115}
116
117.parent {
118  flex-direction: column;
119}
120
121.btn {
122  width: 70%;
123  height: 60px;
124  margin: 15px;
125}
126```
127
128```js
129// xxx.js
130let newDiv = null
131let newImage = null
132
133export default {
134  appendDiv() {
135    let parent = this.$element('parentDiv')
136    newDiv = dom.createElement('div')
137    newDiv.setStyle('width', '150px')
138    newDiv.setStyle('height', '150px')
139    newDiv.setStyle('backgroundColor', '#AEEEEE')
140    newDiv.setStyle('marginTop', '15px')
141    parent.addChild(newDiv)
142  },
143  appendImage() {
144    newImage = dom.createElement('image')
145    newImage.setAttribute('src', 'common/testImage.jpg')
146    newImage.setStyle('width', '120px')
147    newImage.setStyle('height', '120px')
148    newDiv.addChild(newImage)
149  }
150}
151```