在片段中加载 jQuery 并将元素添加到空白页面

Question

我对 JavaScript 还很陌生，所以如果我的工作流程根本没有意义或者我的词汇还不够精确，请告诉我我应该如何做不同的事情。当前方法我想了解更多关于 Javascript 和外部库的信息。因此，我在 Chrome 的 DevTools 源面板下创建了一个片段，打开about:blank并执行以下代码（我从不同的源复制并粘贴）：代码(function(head) {  var newscript = document.createElement('script');  newscript.type = 'text/javascript';  newscript.async = true;  newscript.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);})(document.getElementsByTagName('head'));function jQueryReady() {  if (window.jQuery) {    jQuery.noConflict();    my_code(jQuery);  } else {    setTimeout(jQueryReady, 100);  }}jQueryReady();function my_code($) {  console.log("OK");  $('head').append($('script', {    type : 'text/javascript',    async: true,    src  : 'https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js'  }));  $('head').append($('link', {    rel : 'stylesheet',    href: 'https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css'  }));}结果然后当我查看 的源代码时about:blank，我看到jQuery脚本正确插入到头部中，我看到控制台显示OK，但是spectrumJavaScript 和 CSS 都没有插入头部。问题为什么代码没有添加到 HTML 文件中？我需要改变什么才能使它工作？如果我my_code直接在控制台中运行代码，一切似乎都正常吗？为什么？在不编写自己的 html 文件的情况下使用 JavaScript 的正确方法是什么？通过片段的方法是否about:blank有意义？about:blank每当我对代码段进行更改时，我都需要重新加载，所以我想有一种更优雅的方式来做到这一点。关于如何做得更好的任何提示？