VUE3，创建和渲染dom元素的问题
需求是先获得页面上的父元素，然后向该父元素添加多个子元素。首先我尝试这样，即先后添加：
const onEditorReady = () => {
console.log('EditorReady');
// 获得父元素
const domEditorToolBar = document.getElementsByClassName('ck-toolbar__items');
// 创建子元素
const domBtnA = h('button', { class: 'ck ck-button', onClick: doEditorFullScreen }, 'A');
const domBtnB = h('button', { class: 'ck ck-button', onClick: doEditorFullScreen }, 'B');
// 渲染子元素
render(domBtnA, domEditorToolBar);
render(domBtnB, domEditorToolBar);
}
存在问题：结果只会渲染出最后一个，即B，A未被渲染出来，不知道什么原因。
然后我尝试嵌套子元素，例如这样：
const onEditorReady = () => {
console.log('EditorReady');
// 获得父元素
const domEditorToolBar = document.getElementsByClassName('ck-toolbar__items');
// 创建子元素
const domBtnA = h('button', { class: 'ck ck-button', onClick: doEditorFullScreen }, 'A');
const domBtnB = h('button', { class: 'ck ck-button', onClick: doEditorFullScreen }, 'B');
// 渲染子元素
render(h('span', {}, ), domEditorToolBar);
}
存在问题：A和B都被渲染出来了，可见实际上也是渲染了一个span（包含A和B），结构变成了：
<父元素>
<原有子元素>
<原有子元素>
<span>
<A/>
<B/>
</span>
</父元素>
由于加套了一个span会影响元素样式，所以我不能使用第二种方法。
请教各位大佬，这种需求应该怎么写？感谢
看一下你的render函数怎么写的 bilibini 发表于 2023-1-18 12:12
看一下你的render函数怎么写的
我用的是直接从vue导出的：
import { ref, h, render } from 'vue'; 本帖最后由 13604811047 于 2023-1-18 13:48 编辑
import { Fragment } from "vue";
render(h(Fragment, ), domEditorToolBar); 把<A/> <B/>，写在一个组件里面，然后用template
<template>
<A/>
<B/>
</template>
h(这个组件) 既然用了vue就不要操作dom了。
页:
[1]