在片段中加载 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 都没有插入头部。

问题

1. 为什么代码没有添加到 HTML 文件中？我需要改变什么才能使它工作？

2. 如果我my_code直接在控制台中运行代码，一切似乎都正常吗？为什么？

3. 在不编写自己的 html 文件的情况下使用 JavaScript 的正确方法是什么？通过片段的方法是否about:blank有意义？about:blank每当我对代码段进行更改时，我都需要重新加载，所以我想有一种更优雅的方式来做到这一点。关于如何做得更好的任何提示？