用js添加html模板的问题答案

【问题标题】：Issue with adding html template with js用js添加html模板的问题
【发布时间】：2023-03-04 11:50:01
【问题描述】：

我正在尝试从data-prototype添加我的html网站代码：

<div id="accordion" data-prototype='
<div class="card-body">
    <textarea id="solution_answers___name___content" name="solution[answers][__name__][content]" required="required"></textarea>

    <script type="text/javascript">
        var CKEDITOR_BASEPATH = "/bundles/fosckeditor/";
    </script>
    <script type="text/javascript" src="/bundles/fosckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        if (CKEDITOR.instances["solution_answers___name___content"]) { 
            CKEDITOR.instances["solution_answers___name___content"].destroy(true); 
            delete CKEDITOR.instances["solution_answers___name___content"]; 
        }

    </script>
</div>'></div>

如您所见，ckeditor 中还有一些js 代码。

当我尝试使用jquery 添加它时：

let el = document.querySelector('#accordion');
let template = el.dataset.prototype;
let $root = $(el);

$root.append(template);

一切正常，我的意思是控制台中没有错误。

当我尝试用 vanilla js 添加它时：

let el = document.querySelector('#accordion');
let template = el.dataset.prototype;
const scriptEl = document.createRange().createContextualFragment(template);
el.append(scriptEl);

在开发控制台中，我收到错误：

Uncaught ReferenceError: CKEDITOR is not defined

如果我再次执行相同的脚本，错误就消失了，一切都按预期工作。

有人知道，为什么我会收到这个错误吗？

Here是/bundles/fosckeditor/ckeditor.js的内容

【问题讨论】：

标签： javascript html jquery ckeditor

【解决方案1】：

似乎该错误与您尝试将此 html 代码添加到您的网站无关。您应该将 CKEDITOR 定义为 const let 或 var（我不推荐第三个），而不是使用 OR 并将其分配给窗口对象。

const CKEDITOR = //...

【讨论】：

好的，但是为什么使用 jquery 可以？