HTML provides support to run scripts on client-side (that means in the browser). Scripts provide us several tools to make an HTML page dynamic and interactive. First, we can attach scripts to different events on the page -- thus, we can add a script to do something specific when a specific event (like, a mouse-click) happens on a specific element (like, a button on the page). Second, we can also attach scripts to validate a task, like validating user-input in a form. We can keep script element anywhere in an HTML page and we can place it as many times as required.
We can add scripts to a page using the <script> element. Before we go further, let us look at the script element and its various attributes.
<script type=".." src=".." defer="defer" charset=".."> Script goes here. </script>
The next attribute of the script element is the src attribute. This allows us to include the script in a separate file and simply add the location of the file in the HTML page. This enables us to keep the structure of the HTML separate from the behavior (provided by the script) of the page. W3C recommends that we keep scripts separate from the HTML content.
The above example also shows an important behavior of accessing HTML elements from within a script. The W3C specification does not provide a standard way for referring to HTML objects. However, the recommendation is that the scripts should get hold of elements using their name or ID; the above example does so using the ID.
Once loaded, the page would display the text added to the <div> element. Here is the output: