1. `alert()` Method
The `alert()` method displays an alert dialog with a specified message and an OK button. It's useful for simple notifications and debugging.
<script>
alert('Hello, World!');
</script>
The above code will show a popup with the message "Hello, World!".
2. `console.log()` Method
The `console.log()` method outputs information to the browser's console. This is primarily used for debugging purposes and checking the values of variables.
<script>
console.log('Hello, Console!');
</script>
The above code will log "Hello, Console!" to the browser's console, which can be accessed via the developer tools.
3. Modifying the DOM
JavaScript can directly modify the content of HTML elements on the page using the DOM API. This allows you to change text, attributes, and styles dynamically.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Output</title>
</head>
<body>
<h1 id="header">Original Text</h1>
<script>
document.getElementById('header').innerText = 'Updated Text';
</script>
</body>
</html>
The above example changes the text of the `
` element with the id `header` from "Original Text" to "Updated Text".
4. `document.write()` Method
The `document.write()` method writes a string of text directly to the HTML document. It should be used sparingly, as it can overwrite the entire document if used after the page has loaded.
<script>
document.write('Hello, Document!');
</script>
The above code will write "Hello, Document!" directly to the HTML document, which appears in the place where the script is executed.