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

Question

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

1. 能够创建多个具有不同类的 div

2. 然后我们使用它们为多个图表创建“容器”

问题在于此方法动态创建了 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 和一个新动态创建的类名是？

Answer 1

eParent需要DOM Element存在。例如，您可以调用document.querySelector('body')并获取主体，然后它允许您附加到body元素。不看结构很难直接给你解决方案HTML。但简而言之，您要附加到的父元素需要在函数内部querySelector。