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

Question

I have the following method where the main intentions are to:

1. Be able to create multiple divs all with different classes
2. Using those then we create 'containers' for multiple charts

The problem is that this method dynamically created the divs and classes. I need to have them available in the document to actually use appendChild, but since they're dynamically created I can't hardcode them onto the document

I've commented where necessary to show what the lines are for.

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 and we have the following error: Uncaught TypeError: Cannot read property 'appendChild' of null

The previous answer I received was that I needed to put it in the document, but how would I go about putting a newly and dynamically created div with a newly and dynamically created class name in the document when I don't know what the class name is?

Answer 1

eParent needs to be DOM Element that exists. For example, you could call document.querySelector('body') and get the body, which would then allow you to append to the body element.

It's difficult to give you a direct solution without seeing the HTML structure. But in short, the parent element you want to append to needs to be inside the querySelector function.