JavaScript Output
JavaScript provides different methods to display output, such as [Link](), alert(),
[Link](), and manipulating HTML elements directly. Each method has its specific
use cases, whether for debugging, user notifications, or dynamically updating web content. Here
we will explore various JavaScript output methods, demonstrating how and when to use them
effectively.
There are primarily multiple distinct methods for displaying output in JavaScript. Although there
are other methods for output display, they are not advisable, so it is recommended to refrain from
using alternative output approaches.
1. JavaScript innerHTML Property
The innerHTML property is used with the HTML element. JavaScript can be used to select an
element using the [Link](id) method, and then use the innerHTML
property to display the output on the specified element (selected element).
Syntax:
[Link]("id").innerHTML;
Example: The [Link](id) method with innerHTML property is used to
display the output.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>
Display Output using innerHTML Property
</h2>
<p id="GFG"></p>
<!-- Script to use innerHTML -->
<script>
[Link]("GFG").innerHTML
= "Hello Geeks!";
</script>
</body>
</html>
Output:
2. JavaScript [Link]() Method
The [Link]() method is used for logging messages to the console. It is a debugging tool
available in most web browsers. It is used during development to output information about the
state of the program.
Syntax:
[Link]();
Example: This example uses the [Link]() property to display data.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>
Display Output using [Link]() Method
</h2>
<!-- Script to use [Link]() -->
<script>
[Link]("Hello Geeks!");
</script>
</body>
</html>
Output:
3. JavaScript [Link]() Method
To use the [Link](), simply call this method and provide the content you want to be
written to the document. This method is often used for directly adding content to the HTML
document while it is being parsed.
Note: If we use [Link]() after the HTML document is loaded, it will delete all existing
HTML.
Syntax:
[Link]();
Example: The [Link]() method display the output.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>
Display Output using [Link]() Method
</h2>
<!-- Script to uses [Link]() -->
<script>
[Link]("Hello Geeks!");
</script>
</body>
</html>
Output:
4. JavaScript [Link]() Method
The [Link]() method is used to display an alert box with a specified output (or message)
and an OK button.
Syntax:
[Link]();
Note: We can skip the window keyword in this method.
Example: The [Link]() method display the output data.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>
Display Output using [Link]() Method
</h2>
<!-- Script to use [Link]() -->
<script>
[Link]("Hello Geeks!");
</script>
</body>
</html>
Output:
5. JavaScript [Link]() Method
The [Link]() method is used to open the browser's print dialog, allowing the user to
print the current page. JavaScript does not contain any default print object or methods.
Syntax:
[Link]();
Example: The [Link]() method prints the current page.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript [Link]() Method</h2>
<button > Click here to Print
</button>
</body>
</html>
Output:
6. JavaScript [Link]() Method
The [Link]() method is used to display a dialog box that prompts the user input. It
returns the text entered by the user as a string. It doesn't display output directly but captures
user input.
Note: This method is not used for output, it only use to take input from user.
Syntax:
[Link]();
Example: The [Link]() method to take user input and display the entered data used
alert() method.
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>
Display prompt box for user input
</h2>
<script>
let userInput = [Link]("Please Enter your Input");
if (userInput !== null) {
[Link]("Hello, " + userInput + "!");
} else {
[Link]("You clicked Cancel or closed the prompt.");
}
</script>
</body>
</html>
Output:
