为了账号安全,请及时绑定邮箱和手机立即绑定

当动态创建该元素及其类名时,如何将 div 放入文档中?

当动态创建该元素及其类名时,如何将 div 放入文档中?

千巷猫影 2023-05-25 17:09:43
我有以下方法,主要目的是:能够创建多个具有不同类的 div然后我们使用它们为多个图表创建“容器”问题在于此方法动态创建了 div 和类。我需要在文档中提供它们才能实际使用 appendChild,但由于它们是动态创建的,所以我无法将它们硬编码到文档中我在必要的地方发表了评论,以说明这些线路的用途。createChartContainer(chartRef) {    // bring up the grid object    for (var chartDataInTable of this.tableData) {        // if this grid does not have 0 charts        if(chartDataInTable.summary_charts.length != 0) {            // create div            var createDiv = document.createElement('div');            // generate a string I can use as the class name for the newly created div shown above            var randomStringAsClassNames = Math.random().toString(36).substring(7);            // assign the random string as the className for the newly created div            createDiv.className = 'div_' + randomStringAsClassNames;            // chartClassName is defined as a string in data: () => ....            this.chartClassName = createDiv.className;            // non-negotiable as this shows the details of the created chart            var eChart = chartRef.chartElement;            // select the div that we've just created            var eParent = document.querySelector("." + this.chartClassName + "");            eParent.appendChild(eChart);        }    }},STRUCTURE OF ELEMENTS IN <script> TAG i.e. the Document (Note: I'm using Vue JS) (e.g. where the div should go)<template>    <v-card>        <v-text-field            label="Please enter chart name"            v-model="chartName"            append-outer-icon="mdi-content-save"            @click:append-outer="saveChart"        />    </v-card><template>console.log(eParent) 返回 null 并且出现以下错误:Uncaught TypeError: Cannot read property 'appendChild' of null我收到的先前答案是我需要将它放在文档中,但是当我不知道类名是什么时,我将如何在文档中放置一个新动态创建的 div 和一个新动态创建的类名是?
查看完整描述

1 回答

?
慕慕森

TA贡献1856条经验 获得超17个赞

eParent需要DOM Element存在。例如,您可以调用document.querySelector('body')并获取主体,然后它允许您附加到body元素。

不看结构很难直接给你解决方案HTML。但简而言之,您要附加到的父元素需要在函数内部querySelector


查看完整回答
反对 回复 2023-05-25
  • 1 回答
  • 0 关注
  • 102 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信