O'Reilly logo

DOM Enlightenment by Cody Lindley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 10. JavaScript in the DOM

10.1 Inserting and Executing JavaScript Overview

JavaScript can be inserted into an HTML document by including external JavaScript files or writing page-level inline JavaScript, which is basically the contents of an external JavaScript file literally embedded in the HTML page as a text node. Don’t confuse element inline JavaScript contained in attribute event handlers (i.e., <div onclick="alert('yo')"></div>) with page inline JavaScript (i.e., <script>alert('hi')</script>).

Both methods of inserting JavaScript into an HTML document require the use of a <script> element node. The <script> element can contain JavaScript code or can be used to link to external JavaScript files via the src attribute. Both methods are explored in the following code example.

Live code

<!DOCTYPE html>
<html lang="en">
<body>

<!-- external, cross domain JavaScript include -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>

<!-- page inline JavaScript -->
<script>
console.log('hi');
</script>

</body>
</html>

Notes

It’s possible to insert and execute JavaScript in the DOM by placing the JavaScript in an element attribute event handler (i.e., <div onclick="alert('yo')"></div>) and using the javascript: protocol (e.g., <a href="javascript:alert('yo')"></a>), but this is no longer considered a modern practice.

Trying to include an external JavaScript file and writing page inline JavaScript using the same <script> element will result ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required