JS Code doesn´t run in AJAX response to innerHTML

Question

My main-File has an AJAX called:

<div id="toAdd">

<script>
        document.getElementById("elementID").addEventListener("click", function () {
            let request = new XMLHttpRequest();
            request.open("GET", "./core/handler_NAME.php?f_VALUE=Y");

            request.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    document.getElementById("toAdd").innerHTML += ' ' + this.responseText; 
                }
            };
            request.send();
        });
    </script>

In the File handler_NAME.php I catch the GET and do the following:

//....
foreach ($dataDBvalues as $row) {
        $data .= ' <script>
            let elem = document.createElement("div");
            elem.id = "myElem' . $row['id'] . '";
            document.getElementById("toAdd").appendChild(elem);
        
            $.ajax({
            url: "./../json/data_NAME.php?f_VALUE=' . $row['id'] . '",
            method: "GET",
            success: function (data) {
                 //..... Code for ChartJS
}

echo $data; //

and the File data_NAME.php returns me an JSON data which I am using above.

NOW whats the problem:

When I go to my site the content - which is only shown by a button click - creates me for each type of the dataDBvalues the correct content in the HTML file and in the correct ID-Div. But for that what I can see the JS-Code in the innerHTML set doesn´t compile cause there is no appendedChild in the HTML. Only the seperated <script>-Areas exist.

So the document.createElement("div"); doesn´t exist anyway in the HTML

btw: my AJAX of the chart JS, the SQL-statement and the JSON works completely fine for itself