How to include inline JavaScript in HAML ? Last Updated : 12 Jul, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report There are mainly two ways to include JavaScript in HTML: Internal/Inline: By using "script" element in the "head" or "body" section. External: By using an external JavaScript file. We will be extending the below example for HTML and see how it could be implemented similarly for HAML. To include inline JavaScript in HTML, the "script" element is used in the "head" or "body" section and the element contains the JavaScript code in-between the opening and closing tags. Consider the example below for an HTML file where we use JavaScript to insert a new "p" element into the "div" using inline JavaScript in the "body" section. HTML <!DOCTYPE html> <html> <head> <title>HTML inline JavaScript demo</title> </head> <body> <div id="container"> <p>Hi, no script applied yet!</p> </div> <script type="text/javascript"> var tag = document.createElement("p"); var text = document.createTextNode( "Inline JavaScript is applied!"); tag.appendChild(text); var element = document.getElementById("container"); element.appendChild(tag); </script> </body> </html> Output: In HAML, instead of using the "script" tag, :javascript could be used. Take care of the indentations because HAML is indentation sensitive. :javascript // JavaScript code goes here with proper indentation So, the same initial HTML example in HAML becomes: html %html %head %title Basic Haml Template %body %div#container %p Hi, no script applied yet! :javascript var tag = document.createElement("p"); var text = document.createTextNode( "Inline JavaScript is applied!"); tag.appendChild(text); var element = document.getElementById("container"); element.appendChild(tag); Output: Another way of including inline JavaScript into HAML is by the use of %script{type: "text/javascript"} %script{type: "text/javascript"} // JavaScript code goes here with proper indentation This format is useful when you would want to use a different type than text/javascript. The initial example in HAML with the use of this method to include inline JavaScript: html %html %head %title Basic Haml Template %body %div#container %p Hi, no script applied yet! %script{type: "text/javascript"} var tag = document.createElement("p"); var text = document.createTextNode( "Inline JavaScript is applied!"); tag.appendChild(text); var element = document.getElementById("container"); element.appendChild(tag); Output: Reference: https://haml.info/docs/yardoc/file.REFERENCE.html#javascript-filter Comment More infoAdvertise with us Next Article How To Include a JavaScript File in Another JavaScript File? A amarjeet_singh Follow Improve Article Tags : JavaScript HTML-Misc JavaScript-Misc Similar Reads How to Include CSS Inside a JavaScript File? Here are the various ways to include CSS inside a JavaScript file.1. Using style Property (Inline Styling)The simplest way to include CSS in JavaScript is by directly modifying the style property of an HTML element. This method applies styles inline, directly to the elements, and overrides any exter 4 min read How does inline JavaScript work with HTML ? Inline JavaScript refers to JavaScript code embedded directly within HTML elements using the onclick, onmouseover, or other event attributes. This allows you to execute JavaScript code in response to user interactions or specific events without needing a separate JavaScript file or script block.Synt 2 min read How To Include a JavaScript File in Another JavaScript File? The import and export syntax available in ES6 (ECMAScript 2015) module is used to include a JavaScript file in another JavaScript file. This approach is the most modern and recommended way to share code between JavaScript files.It allows you to break your code into smaller modules and then import th 4 min read How to Add JavaScript in HTML Document? To add JavaScript in HTML document, several methods can be used. These methods include embedding JavaScript directly within the HTML file or linking an external JavaScript file.Inline JavaScriptYou can write JavaScript code directly inside the HTML element using the onclick, onmouseover, or other ev 3 min read How to call JavaScript function in HTML ? In HTML, you can easily call JavaScript functions using event attributes like onclick and onload. Just reference the function name within these attributes to trigger it. You can also call functions directly within script blocks using standard JavaScript syntax. Let's create an HTML structure with so 2 min read How to use Ejs in JavaScript ? EJS or Embedded Javascript Templating is a templating engine used by Node.js. The template engine helps to create an HTML template with minimal code. Also, it can inject data into the HTML template on the client side and produce the final HTML. Installation StepsInstall the module using the followin 3 min read Like