The browser’s print option is used to print the content of a webpage. In this case, the entire page content is selected to be printed in the browser. The browser’s print dialog does not allow selecting a specific section of the webpage for printing. JavaScript code should be used to print specific areas of the web page. Depending on where you run the JavaScript code, there are different ways to print in JavaScript.
When you want to print your browser’s current webpage, you can use the window.print() method. The window.print() method will print the contents of the currently active tab in your browser.
You can run the method from the browser console to print the webpage to your printer. But if you want to print values and HTML content using JavaScript, there are several ways to do it:
There are several ways to print or display output in JavaScript:
- Modifying the
innerHTMLproperty of an HTML element to dynamically update the content on the page. - Using the
console.log()method to print messages to the browser console. - Writing output directly to the HTML document using the
document.write()method. - Using the
Window.alert()method to display messages in an alert box.
Print using innerHTML method
Here’s an example of how to change the innerHTML property of an element to print a message:
<html>
<head>
<title>Changing innerHTML property</title>
</head>
<body>
<div id="my-element">Original content</div>
<script>
// Select the element
var myElement = document.getElementById("my-element");
// Change the innerHTML property
myElement.innerHTML = "New content!";
</script>
</body>
</html>In this example, we start with a div element that has an id of “my-element” and some initial content (“Original content”). Then, in the script tag, we use the getElementById method to select that element and store it in a variable called myElement. Finally, we change the innerHTML property of myElement to “New content!”. When the script runs, the content of the div element will be updated to “New content!”.
Print with console.log() method
The console.log() method in JavaScript allows you to print messages or values to the browser console. The following shows how to do this when you set the value of a variable in your JavaScript code.
let name = "Mir";
console.log(name); // prints: Mir
The console.log() method is a built-in method in JavaScript that instructs the browser or Node.js environment to log a message to the console. It is primarily used for debugging and testing purposes.
Print with document.write() method
The document.write() method is a built-in method in JavaScript that lets you write data directly to the tag of an HTML document. When you call document.write(), the content is inserted into the HTML document where the script tag containing the document.write() call appears.
Here is an example of using document.write() to write a message to a document:
document.write("Hello, world!");In this example, the string “Hello, world!” will be written to the document.
You can also use document.write() to write HTML code to the document, like this:
document.write("<h1>Welcome to my website</h1>");In this example, the HTML code for a heading element will be written to the document.
Note that using document.write() can be a bit tricky, as it can overwrite the entire document if not used carefully. In general, it’s better to use other methods, such as innerHTML, to manipulate the document content.
Print using window.alert() method
window.alert() method that displays an alert box with a message to the user. When you call window.alert() with a message as an argument, a dialog box will appear in the user’s browser window, displaying the message you specified.
Here’s an example of using window.alert() to display a message to the user:
window.alert("Hello World!");Output:
Using the window.alert() method, you can check your JavaScript variables and values through the browser’s alert box.
Conclusion
Printing or displaying output in JavaScript is accomplished using several methods. console.log() is commonly used for debugging and testing, alert() is used to display messages in an alert box, document.write() can write the output directly to an HTML document, and innerHTML can be used to dynamically update the content on the page. Additionally, window.print() can be used to print the current page or a specific element. Each method has its own use cases and should be used appropriately.
