HarmonyOS meta-service - dynamically create components

Example effect:

    

Provides the ability to dynamically add components to the page and set properties and styles for the dynamically added components (supported from API version 8).

Attributes:

createElement：

createElement(tag: string): Element Create a component object.

parameter:

parameter name	type	required	illustrate
tag	string	yes	Component name.

setAttribute：

setAttribute(name: string, value: string): void Dynamically set component attributes.

parameter:

parameter name	type	required	illustrate
name	string	yes	property name.
value	string	yes	attribute value.

setStyle：

setStyle(name: string, value: string): boolean dynamically sets the style of the component.

parameter:

parameter name	type	required	illustrate
name	string	yes	style name.
value	string	yes	style value.

addChild：

addChild(child: Element): void Add the dynamically created component to the parent component.

parameter:

parameter name	type	required	illustrate
child	Element	yes	component object.

Sample code:

index.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>

index.css

.container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.parent {
    flex-direction: column;
}

.btn {
    width: 70%;
    margin: 15px;
    padding: 20px;
}

index.js

let newDiv = null
let newImage = null
export default {
    appendDiv() {
        let parent = this.$element('parentDiv')
        newDiv = dom.createElement('div')
        newDiv.setStyle('width', '80%')
        newDiv.setStyle('height', '60%')
        newDiv.setStyle('backgroundColor', '#AEEEEE')
        newDiv.setStyle('flexDirection', 'column')
        newDiv.setStyle('alignItems', 'center')
        newDiv.setStyle('justifyContent', 'center')
        newDiv.setStyle('borderRadius', '20px')
        parent.addChild(newDiv)
    },
    appendImage() {
        newImage = dom.createElement('image')
        newImage.setAttribute('src', 'common/test.jpeg')
//        newImage.setStyle('width', '300px')
        newImage.setStyle('height', '300px')
        newImage.setStyle('padding', '20px')
        newDiv.addChild(newImage)
    }
}