Javascript 当动态创建该元素及其类名（例如document.createElement）时，如何将div放入文档中？

我采用以下方法，主要目的是：

能够使用不同的类创建多个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>

createChartContainer（chartRef）{
//打开网格对象
for（此.tableData的var CHARTDATAITABLE）{
//如果此网格没有0个图表
if（chartDataInTable.summary\u charts.length！=0）{
//创建div
var createDiv=document.createElement（'div'）；
//生成一个字符串，我可以将其用作上面显示的新创建的div的类名
var randomStringAsClassNames=Math.random（）.toString（36）.substring（7）；
//将随机字符串指定为新创建的div的类名
createDiv.className='div_uU2;'+randomStringAsClassNames；
//chartClassName定义为数据中的字符串：（）=>。。。。
this.chartClassName=createDiv.className；
//不可协商，因为这显示了所创建图表的详细信息
var eChart=chartRef.chartElement；
//选择我们刚刚创建的div
var eParent=document.querySelector（“.”+this.chartClassName+”）；
eParent.appendChild（eChart）；
}
}
},
标签中元素的结构，即文档（注意：我使用的是Vue JS）（例如div应该放在哪里）

log（eParent）返回null，我们有以下错误：UncaughtTypeError:无法读取null的属性'appendChild'

---

我之前收到的回答是，我需要将它放在文档中，但是当我不知道类名是什么时，我如何在文档中放置一个新创建的动态创建的div和一个新创建的动态创建的类名？

eParent

需要是存在的

DOM元素

。例如，您可以调用

document.querySelector（'body'）

并获取body，这将允许您附加到

body

元素

---

如果不看到

HTML

结构，就很难给出直接的解决方案。但简而言之，您要附加到的父元素需要位于

querySelector

函数中。

我在问题中添加了我的“HTML”结构是什么（在引号中，我使用的是Vue JS），这是否有助于看我下一步可以做些什么来修复该方法，我仍然不确定您希望这个新元素去哪里，但是假设您希望这些新的Div位于v-card的底部，您可以在卡上放置例如，

class=“Div output”

。。。然后在查询选择器中，

.div output

。。由于元素现在存在于

DOM

中，您的div将出现。您是否考虑过使用列表呈现来输出div元素？（）哦，我认为使用列表来呈现div元素可能会有用！尽管在上述情况下，类名是使用createDiv.className='div_uz'+randomStringAsClassNames动态生成的；div是使用document.createElement（'div'）创建的；如何创建div和类的列表？不，您可以保留相同的随机类生成函数，将其放入Vue方法中，返回它吐出的随机名称，并将该方法v绑定到列表渲染循环中的divs elements类。像这样<代码>有关绑定类的更多信息：