diff --git a/zh-cn/application-dev/quick-start/arkts-rendering-control.md b/zh-cn/application-dev/quick-start/arkts-rendering-control.md
index 08663ab440ede2aa39dcc722da1fdb54217942a3..11066681cec9d1e13a10c4031dd407c9e72abb70 100644
--- a/zh-cn/application-dev/quick-start/arkts-rendering-control.md
+++ b/zh-cn/application-dev/quick-start/arkts-rendering-control.md
@@ -125,8 +125,8 @@ interface DataChangeListener {
 | 参数名        | 参数类型              | 必填 | 参数描述                                                     |
 | ------------- | --------------------- | ---- | ------------------------------------------------------------ |
 | dataSource    | IDataSource           | 是   | 实现IDataSource接口的对象，需要开发者实现相关接口。          |
-| itemGenerator | (item: any) => void   | 是   | 生成子组件的lambda函数，为数组中的每一个数据项创建一个或多个子组件，单个子组件或子组件列表必须包括在大括号“{...}”中。 |
-| keyGenerator  | (item: any) => string | 否   | 匿名函数，用于给数组中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时，其键值不得更改，当数组中的数据项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 |
+| itemGenerator | (item: any, index?: number) => void   | 是   | 生成子组件的lambda函数，为数组中的每一个数据项创建一个或多个子组件，单个子组件或子组件列表必须包括在大括号“{...}”中。 |
+| keyGenerator  | (item: any, index?: number) => string | 否   | 匿名函数，用于给数组中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时，其键值不得更改，当数组中的数据项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 |
 
 ### IDataSource类型说明
 
@@ -142,14 +142,14 @@ interface DataChangeListener {
 | 名称                                                     | 描述                                   |
 | -------------------------------------------------------- | -------------------------------------- |
 | onDataReloaded(): void                                   | 重新加载所有数据。                     |
-| onDataAdded(index: number): void (deprecated)            | 通知组件index的位置有数据添加。        |
-| onDataMoved(from: number, to: number): void (deprecated) | 通知组件数据从from的位置移到to的位置。 |
-| onDataDeleted(index: number): void (deprecated)          | 通知组件index的位置有数据删除。        |
-| onDataChanged(index: number): void (deprecated)          | 通知组件index的位置有数据变化。        |
-| onDataAdd(index: number): void 8+                        | 通知组件index的位置有数据添加。        |
-| onDataMove(from: number, to: number): void 8+            | 通知组件数据从from的位置移到to的位置。 |
-| onDataDelete(index: number): void 8+                     | 通知组件index的位置有数据删除。        |
-| onDataChange(index: number): void 8+                     | 通知组件index的位置有数据变化。        |
+| onDataAdded(index: number): void<sup>deprecated</sup>           | 通知组件index的位置有数据添加。从API Version 8开始废弃，建议使用onDataAdd。       |
+| onDataMoved(from: number, to: number): void<sup>deprecated</sup> | 通知组件数据从from的位置移到to的位置。从API Version 8开始废弃，建议使用onDataMove。 |
+| onDataDeleted(index: number): void<sup>deprecated</sup>         | 通知组件index的位置有数据删除。从API Version 8开始废弃，建议使用onDataDelete。        |
+| onDataChanged(index: number): void<sup>deprecated</sup>          | 通知组件index的位置有数据变化。 从API Version 8开始废弃，建议使用onDataChange。       |
+| onDataAdd(index: number): void<sup>8+</sup>                     | 通知组件index的位置有数据添加。        |
+| onDataMove(from: number, to: number): void<sup>8+</sup>           | 通知组件数据从from的位置移到to的位置。 |
+| onDataDelete(index: number): void<sup>8+</sup>                     | 通知组件index的位置有数据删除。        |
+| onDataChange(index: number): void<sup>8+</sup>                     | 通知组件index的位置有数据变化。        |
 
 ## 示例
 
diff --git a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md
index c67743da8b03297fba24172d508281d34d56e64a..7c34e92d3b7f9e55b5c90b2221eebfabd6539ae6 100644
--- a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md
+++ b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md
@@ -102,4 +102,5 @@
     - [事件参数](js-components-custom-event-parameter.md)
     - [slot插槽](js-components-custom-slot.md)
     - [生命周期定义](js-components-custom-lifecycle.md)
+- [动态创建组件](js-components-create-elements.md)
 - [数据类型说明](js-appendix-types.md)
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-create-elements.md b/zh-cn/application-dev/reference/arkui-js/js-components-create-elements.md
new file mode 100644
index 0000000000000000000000000000000000000000..5c86727d5b714f5be38752746d48e91e8a855954
--- /dev/null
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-create-elements.md
@@ -0,0 +1,145 @@
+# 动态创建组件
+
+提供在页面中动态添加组件，并为动态添加的组件设置属性与样式的能力。
+
+>  **说明：**
+>
+> - 从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+## createElement
+
+createElement(tag: string): Element
+
+创建一个组件对象。
+
+**参数：** 
+
+| 参数名     | 类型       | 必填   | 说明      |
+| ------- | ------------ | ---- | ------- |
+| tag | string | 是    | 组件名称。 |
+
+**返回值：** 
+
+| 类型        | 说明            |
+| ----------- | ------------- |
+| Element | 对应tag名称的组件对象。 |
+
+```js
+let newImage = dom.createElement('image')
+```
+
+
+## setAttribute
+
+setAttribute(name: string, value: string): void
+
+动态设置组件的属性。
+
+**参数：** 
+
+| 参数名     | 类型       | 必填   | 说明      |
+| ------- | ------------ | ---- | ------- |
+| name | string | 是    | 属性名称。 |
+| value | string | 是    | 属性值。 |
+
+```js
+newImage.setAttribute('src', 'common/testImage.jpg')
+```
+
+
+## setStyle
+
+setStyle(name: string, value: string): boolean
+
+动态设置组件的样式。
+
+**参数：** 
+
+| 参数名     | 类型       | 必填   | 说明      |
+| ------- | ------------ | ---- | ------- |
+| name | string |  是    | 样式名称。 |
+| value | string |  是    | 样式值。 |
+
+**返回值：** 
+
+| 类型        | 说明            |
+| ----------- | ------------- |
+| boolean | 设置成功时返回true，失败时返回false。 |
+
+```js
+newImage.setStyle('width', '120px')
+```
+
+
+## addChild
+
+addChild(child: Element): void
+
+将动态创建的组件添加到父组件当中。
+
+**参数：** 
+
+| 参数名     | 类型       | 必填   | 说明    |
+| ------- | ------------ | ---- | ------- |
+| child | Element | 是    | 组件对象。 |
+
+```js
+newDiv.addChild(newImage)
+```
+
+
+## 示例
+
+```html
+<!-- xxx.hml -->
+<div class="container">
+  <div id="parentDiv" class="parent"></div>
+  <button onclick="appendDiv" class="btn">动态创建div</button>
+  <button onclick="appendImage" class="btn">动态创建image到创建的div中</button>
+</div>
+```
+
+```css
+/* xxx.css */
+.container {
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.parent {
+  flex-direction: column;
+}
+
+.btn {
+  width: 70%;
+  height: 60px;
+  margin: 15px;
+}
+```
+
+```js
+// 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)
+  }
+}
+```
\ No newline at end of file