To load my local js lib and run an alert mand.

var jq = document.createElement('script');
jq.src = "http://127.0.0.1/js/jquery-3.3.1.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
$(document).ready(function(){
alert("hello world");
});

1.In chrome's inspect--console
Pop up a window with hellow world,no problem.

2.in firefox's console.
It run into an error as below:

SyntaxError: '[object HTMLDocument]' is not a valid selector

Why the code snippet can't run in firefox's console?

To load my local js lib and run an alert mand.

var jq = document.createElement('script');
jq.src = "http://127.0.0.1/js/jquery-3.3.1.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
$(document).ready(function(){
alert("hello world");
});

1.In chrome's inspect--console
Pop up a window with hellow world,no problem.

2.in firefox's console.
It run into an error as below:

SyntaxError: '[object HTMLDocument]' is not a valid selector

Why the code snippet can't run in firefox's console?

• javascript
• google-chrome
• firefox

• The dev tools provide a Network tab. Please confirm: Is the resource http://127.0.0.1/js/jquery-3.3.1.min.js found (e.g. HTTP 200 response)? If not, which actual URL is requested? $ isn’t jQuery in your case, but the document.querySelector alias available in the console. – Sebastian Simon Commented Aug 21, 2018 at 2:39
• document.getElementsByTagName('head')[0] can be replaced by document.head. – Sebastian Simon Commented Aug 21, 2018 at 2:52

1 Answer 1

At the time that those mands are entered into the console, $ is not jQuery - rather, it is a helper function provided by the browser that is very similar to document.querySelector. See docs on the built-in helper functions available on some browsers.

You can see the source for Firefox's $ here:

WebConsoleCommands._registerOriginal("$", function(owner, selector) {
  try {
    return owner.window.document.querySelector(selector);
  } catch (err) {
    // Throw an error like `err` but that belongs to `owner.window`.
    throw new owner.window.DOMException(err.message, err.name);
  }
});

Even if $ were jQuery, the line

$(document).ready(function(){

wouldn't refer to jQuery yet, because you only just inserted the script - it hasn't necessarily been downloaded and parsed yet. So, it'll still refer to the querySelector alias, and

document.querySelector(document)

doesn't make any sense.

The best solution would be to attach a load handler to the inserted script, so that you can run a function once jQuery is loaded. For example:

const jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.js";
document.head.appendChild(jq);
jq.addEventListener('load', () => {
  console.log("hello world");
  console.log($ === jQuery);
});

Once jQuery loads, it will ensure that window.$ now points to jQuery rather than the querySelector alias; the above snippet will log true after a moment.