Simple Javascript Examples
JavaScript Examples: document.write()
In JavaScript, the document.write() function is used to display dynamic content on web pages. This guide shows practical examples of using JavaScript both inline and in external files.
Creating JavaScript Examples
There are two main ways to write JavaScript code:
1. Inline in HTML
Write JavaScript code directly into the HTML page using <script> tags
2. External File
Write JavaScript code in an external .js file and link it to your HTML
1. Write JavaScript Code into HTML Page
This example demonstrates writing JavaScript directly in an HTML page:
<html>
<head>
</head>
<body>
<script>
document.write("Hello JavaScript!");
</script>
</body>
</html>Output:
Example Explained:
- • To insert JavaScript into an HTML page, we use the
<script>tag (you can also use the type attribute to define the scripting language). - • The word
document.writeis a standard JavaScript command for writing output to the page. By entering thedocument.writecommand between the <script> tags, the browser will recognize it as a JavaScript command and execute the code line. In this case, the browser will write "Hello JavaScript!" to the page.
2. Write JavaScript Code in External File
This example demonstrates using an external JavaScript file:
Step 1: Create External JavaScript File
Create a file named myScriptFile.js:
document.write("I am external JavaScript file!");Step 2: Link the External File in HTML
Link the external JavaScript file in your HTML using the src attribute:
<html>
<head>
<script src="myScriptFile.js"></script>
</head>
<body>
</body>
</html>Note: In this example, the script is located in the same folder as the current page. You can also use paths like /js/myScriptFile.js or full URLs.
Output:
Understanding document.write()
Purpose
Writes strings or HTML to the document while it's being loaded
Usage
Commonly used for simple examples and tutorials
Important: document.write() should not be used after the document has finished loading, as it will overwrite the entire page content. For modern applications, use DOM manipulation methods like textContent, innerHTML, or appendChild() instead.
Modern Alternatives to document.write()
While document.write() works, modern JavaScript uses better methods:
1. Using innerHTML
document.getElementById('demo').innerHTML = "Hello JavaScript!";2. Using textContent
document.getElementById('demo').textContent = "Hello JavaScript!";3. Using createElement
const para = document.createElement('p');
para.textContent = "Hello JavaScript!";
document.body.appendChild(para);Key Takeaways
- Learning Tool:
document.write()is perfect for learning JavaScript basics - Simple Output: Great for quickly displaying text or HTML during page load
- External Files: Use external .js files for better code organization and reusability
- Modern Code: For production applications, use DOM manipulation methods instead
Summary
These examples demonstrate the basics of JavaScript output using document.write(). You learned how to write JavaScript both inline in HTML and in external files.
While document.write() is useful for learning, modern JavaScript development uses DOM manipulation methods for better performance and control over your web pages.