Being able to select elements on the page based on their [id] is a "feature" from early JavaScript (DOM lvl 0 or 1 methinks, can't seem to find the source).
Unfortunately it's a temperamental feature. What would happen if you had:
<div id="window"></div>
or
<div id="document"></div>
Better yet, what happens here?
<div id="foo"></div>
<div id="bar"></div>
<script>var foo = document.getElementById('bar');</script>
So the nuances to calling an element based on it's [id] is simply this:
Don't use it.
It's not consistent, and not guaranteed to receive future support.
Personally I'd like to see this "feature" go the way of document.all. It only causes more issues than it solves, and document.getElementById, while certainly verbose, is meaningful and understandable.
W3Schools
w3schools.com › tags › att_script_src.asp
HTML script src Attribute
If you want to run the same JavaScript ... over again. Save the script file with a .js extension, and then refer to it using the src attribute in the <script> tag....
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference
JavaScript reference - JavaScript | MDN
The JavaScript reference serves as a repository of facts about the JavaScript language. The entire language is described here in detail. As you write JavaScript code, you'll refer to these pages often (thus the title "JavaScript reference").
Videos
12:45
How to Add JavaScript to HTML - YouTube
03:49
How To Link A JavaScript File To An HTML Document | Step-by-Step ...
03:43
How To Connect A JavaScript File To An HTML File | Step-by-Step ...
03:58
YouTube
04:03
How To Link an External JavaScript File to an HTML Document - YouTube
09:42
HTML Tutorial for Beginners 16 - Adding JavaScript to HTML - YouTube
W3Schools
w3schools.com › js › js_whereto.asp
JavaScript Where To
JS Examples JS HTML DOM JS HTML ... Prep JS Bootcamp JS Certificate JS Reference ... In HTML, JavaScript code is inserted between <script> and </script> tags....
W3Schools
w3schools.com › html › html_scripts.asp
HTML JavaScript
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Top answer 1 of 3
18
Being able to select elements on the page based on their [id] is a "feature" from early JavaScript (DOM lvl 0 or 1 methinks, can't seem to find the source).
Unfortunately it's a temperamental feature. What would happen if you had:
<div id="window"></div>
or
<div id="document"></div>
Better yet, what happens here?
<div id="foo"></div>
<div id="bar"></div>
<script>var foo = document.getElementById('bar');</script>
So the nuances to calling an element based on it's [id] is simply this:
Don't use it.
It's not consistent, and not guaranteed to receive future support.
Personally I'd like to see this "feature" go the way of document.all. It only causes more issues than it solves, and document.getElementById, while certainly verbose, is meaningful and understandable.
2 of 3
2
Using getElementById is more flexible and readable. For instance, this won't work:
<input type="button" value="direct" onclick="document.innerText = 'direct';" />
<div id="document"></div>
for obvious reasons, but this will:
<input type="button" value="getElement" onclick="document.getElementById('document').innerText = 'getElementById'" />
<div id="document"></div>
and it's more clear to other developers what's really going on.
Top answer 1 of 6
260
First you need to download the jQuery library from https://jquery.com/ then load the jQuery library the following way within your HTML head tags.
Then you can test whether jQuery is working by adding your jQuery code after the jQuery loading script.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
$(function(){
alert("My First jQuery Test");
});
</script>
</head>
<body><!-- Your web page --></body>
</html>
If you want to use your jQuery scripts file separately, you must define the external .js file this way after the jQuery library loading.
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>
Test in real time
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
$(function(){
alert("My First jQuery Test");
});
</script>
</head>
<body><!-- Your web page --></body>
</html> 2 of 6
73
This is how you link a JS file in HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script> - tag is used to define a client-side script, such as a JavaScript.
type - specify the type of the script
src - script file name and path
Stack Overflow
stackoverflow.com › questions › 69743069 › how-to-reference-js-in-an-html-file
javascript - How to reference JS in an html file - Stack Overflow
I used <link rel="stylesheet" href="style.css" /> Can someone please help me fix my JS reference? ... That's the correct way to do it. What's not working? Are you getting errors? ... If its doesn't work check console for any problem Or check directory of script src! ... Sign up to request clarification or add additional context in comments.
W3Schools
w3schools.com › jsref › default.asp
JavaScript and HTML DOM Reference
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML and more.
SitePoint
sitepoint.com › javascript
How to reference script in HTML - JavaScript - SitePoint Forums | Web Development & Design Community
January 12, 2020 - If I want to reference a Javascript script in my HTML page, then do I If I need my HTML page to use some Javascript, do I reference the Javascript script by adding reference to it inside the <head></head> elements and t…
Mredkj
mredkj.com › tutorials › reference_js_intro.html
HTML / JavaScript Reference - mredkj.com
This reference will deal with client-side JavaScript. The basics are the same for both browsers. Just like HTML, JavaScript is read by the browser when the web page is loaded. To include JavaScript in an HTML file it has to be placed between the start tag <script> and the end tag </script>. ...
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › HTML › How_to › Add_JavaScript_to_your_web_page
Add JavaScript to your web page - HTML | MDN
Take your webpages to the next level by harnessing JavaScript. Learn in this article how to trigger JavaScript right from your HTML documents.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › HTML › Reference › Elements › script
<script>: The Script element - HTML - MDN Web Docs
The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON. This element includes the global attributes.
Simmons University
web.simmons.edu › ~grabiner › comm244 › weeknine › including-javascript.html
Including JavaScript In Your Page
To include an external JavaScript file, we can use the script tag with the attribute src. You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file.
DigitalOcean
digitalocean.com › community › tutorials › how-to-add-javascript-to-html
How to Add JavaScript to HTML for Beginners | DigitalOcean
July 14, 2025 - project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html · Let’s move our JavaScript code that will show the date as an <h1> header to the script.js file: ... Next, let’s also edit the style.css file by adding a background color and style to the <h1> header: ... Finally, we can reference both the script and the stylesheet from our index.html file.
Stack Overflow
stackoverflow.com › questions › 28035837 › referencing-html-elements-in-javascript
Referencing HTML elements in Javascript - Stack Overflow
I guess I don't like the fact that you can reference pretty much any element by heading straight for the ID. I feel like the hierarchy of parent and child elements get lost. Maybe I'm alone in thinking this. ... If you want to specify the path to your element in a simple way, you can use document.querySelector with a CSS selector: document.querySelector('html > body > #Family > #Dad > p');
SitePoint
sitepoint.com › javascript
How to reference script in HTML - Page 2 - JavaScript - SitePoint Forums | Web Development & Design Community
January 13, 2020 - Please explain how that might occur. JavaScript script tags are as reliable as CSS link tags, or as image img tags, or any other similar tags.
W3Schools
w3schools.com › jsref › jsref_reference.asp
JavaScript Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Pressbooks
ecampusontario.pressbooks.pub › webdev › chapter › javascript-reference
JavaScript Reference – Full Stack Web Development for Beginners
Here are some quick reference reminders about JavaScript. This textbook is just designed to give you a toehold in how to use JavaScript for client-side web app programming. Once you understand how the language works and how JavaScript interacts with the DOM in a browser, you can get more details elsewhere.
Scaler
scaler.com › home › topics › how to link javascript to html?
How to Link JavaScript to HTML? - Scaler Topics
March 22, 2024 - Above, if you will look closely, we are referencing the script.js file name inside the src attribute of <script> tag. As result, script.js file gets linked to our Html. The type attribute is an attribute of <script> tag, it defines the type ...
Quackit
quackit.com › html › howto › how_to_link_javascript_to_html.cfm
How to Link JavaScript to HTML
Explains and demonstrates how to link a JavaScript file to an HTML document. Also how to embed JavaScript within an HTML document. Includes code examples.