title: Load jQuery in snippet and add elements to blank page
body: <p><em>Disclaimer.</em> I am fairly new to JavaScript so if my workflow does not make sense at all or my vocabulary is yet not precise enough, please advise me of how I should do it differently.</p>
  
  <p><strong>Current Approach</strong></p>
  
  <p>I want to learn more about Javascript and external libraries. Thus, I created a snippet under the DevTools sources panel in Chrome, opened <code>about:blank</code> and executed the following code (which I copied and paste from different sources):</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>(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'
    }));
  }
  </code></pre>
  
  <p><strong>Results</strong></p>
  
  <p>When I then look at the source code of <code>about:blank</code>, I see that the <code>jQuery</code> script is correctly inserted into the head, I see that the console shows <code>OK</code>, but neither the <code>spectrum</code> JavaScript nor the CSS is inserted into the head.</p>
  
  <p><strong>Questions</strong></p>
  
  <ol>
  <li>Why is the code not added to the HTML file? What do I need to change to make it work? </li>
  <li>If I run teh code from <code>my_code</code> directly in teh console everything seems to work fine? Why?</li>
  <li>What is a proper way of playing around with JavaScript <strong>without</strong> writing an own html file? Does the approach via snippet and <code>about:blank</code> make sense? I need to reload <code>about:blank</code> whenever I make changes to the snippet, so I guess there is a more elegant way to do so. Any tipps on how to do that better?</li>
  </ol>