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

Question

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

能够创建多个 div 都具有不同的 classes
然后使用这些我们为多个图表创建 'containers'

问题在于此方法动态创建了 div 和 class。我需要让它们在文档中可用才能实际使用 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) returns null 并且出现以下错误：Uncaught TypeError: Cannot read 属性 'appendChild' of null

我收到的先前答复是我需要将其放入文档中，但我将如何将新动态创建的 div 与新动态创建的 class 名称放在一起当我不知道 class 名称是什么时在文档中？

Answer 1

eParent 需要 DOM Element 存在。例如，您可以调用 document.querySelector('body') 并获取正文，这将允许您附加到 body 元素。

没有看到HTML结构，很难给你一个直接的解决方案。但简而言之，您要追加的父元素需要在 querySelector 函数内。

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

How to put a div into the document when that element and its class name are dynamically created (e.g. document.createElement)?

javascript

css

appendchild

jquery-selectors

createelement