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

Question

免责声明。我对 JavaScript 还很陌生，所以如果我的工作流程完全没有意义或者我的词汇还不够精确，请告诉我应该如何以不同的方式去做。 p>

当前方法

我想了解有关 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，但是 spectrum JavaScript 和 CSS 都没有插入到头部。

问题

1. 为什么代码没有添加到 HTML 文件中？我需要改变什么才能让它发挥作用？
2. 如果我直接在控制台中运行 my_code 中的代码，一切似乎都工作正常？为什么？
3. 在不编写自己的 html 文件的情况下使用 JavaScript 的正确方法是什么？通过代码片段和 about:blank 的方法有意义吗？每当我对代码片段进行更改时，我都需要重新加载 about:blank ，所以我想有一种更优雅的方法来做到这一点。关于如何做得更好有什么建议吗？

Answer 1

1. 我相信这是因为在 jQuery 中，当你想创建新元素时，需要将标签名称包裹在“<>”符号中，如下所示:

$('head').append($('<script>', {
type: 'text/javascript',
async: true,
src: '<a href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js" rel="noreferrer noopener nofollow">https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js</a>'
}));


在我看来，尝试像 jsfiddle.net 或 codepen.io 这样的网站是个好主意，至少您可以在其中更轻松地添加 jQuery 等库，而无需编写额外的导入脚本，并且更容易维护。