javascript - JS 代码不会在对 innerHTML 的 AJAX 响应中运行

Question

我的主文件有一个 AJAX，名为：

<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>

在文件 handler_NAME.php 中，我捕获了 GET 并执行以下操作：

//....
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; //

并且 File data_NAME.php 返回我在上面使用的 JSON 数据。

现在是什么问题：

当我访问我的站点时，内容（仅通过单击按钮显示）为每种类型的dataDBvalues在 HTML 文件和正确的 ID-Div 中创建正确的内容。但是为此，我可以在 innerHTML 集中看到的 JS 代码无法编译，因为 HTML 中没有appendedChild。仅存在单独的<script>区域。

所以document.createElement("div");HTML 中无论如何都不存在

顺便说一句：我的图表 JS 的 AJAX、SQL 语句和 JSON 完全适合自己

标签： javascriptphpjqueryhtmlajax