为什么普通js appendChild可以工作，而jQuery .append却不能呢？

Question

这里是一个小提琴：https://jsfiddle.net/3zgfbqav/

我有一个单击功能，我无法单独在jQuery中使用它-只是混合了JS和jQuery。它正在工作，但是我想了解为什么我无法在jQuery中完成所有工作。

//I couldn't get a jQuery equivalent of this function to work so I left it in vanilla js
function createWidgetScriptElement(symbol) {
    var scriptElement = document.createElement('script');
    scriptElement.async = true;
    scriptElement.src = 'https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js';
    scriptElement.innerHTML = JSON.stringify({
            "symbol": symbol,
            "interval": "1m",
            "width": 425,
            "colorTheme": "light",
            "isTransparent": false,
            "height": 450,
            "showIntervalTabs": true,
            "locale": "en"
        });

        return scriptElement;
    }

$('.ttlink').on('click',function(e){
    var symbol = $(this).attr('data-href');
    var widgetScriptElement = createWidgetScriptElement(symbol);
    $('#target').empty();
    document.querySelector('#target').appendChild(widgetScriptElement);
    e.preventDefault();
})

我找不到第一个函数的jQuery等效项-因此，我将其保留为可以正常使用的唯一方法。在click函数中，当我将jQuery语法中的empty和append组合在一起时

$('#target').empty().append(widgetScriptElement);

我在控制台中遇到几个错误，例如“ embed-widget-technical-analysis.js？_ = 1577484658696：1窗口小部件设置解析错误：SyntaxError：JSON输入意外结束”和“提供的设置无效，请还原为默认值“只有当我尝试使用jQuery简化#target div的清空和加载时，我才会得到。