Using innerHTML
The innerHTML property is used to change the HTML content of an element.
Explanation of Code:
The changeContent function changes the content of the <p> element with the ID demo to “Content has been changed!” when the button is clicked.
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript innerHTML Example</title></head><body> <p id="demo">This is a paragraph.</p> <button onclick="changeContent()">Change Content</button> <script> function changeContent() { document.getElementById("demo").innerHTML = "Content has been changed!"; } </script></body></html>
Using document.write()
The document.write() method writes directly to the HTML document. It’s typically used for testing purposes and not recommended for production.
Explanation of Code:
The document.write method writes the text “This is written directly to the document.” to the HTML document.
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript document.write Example</title></head><body> <script> document.write("This is written directly to the document."); </script></body></html>
Using alert()
The alert() method displays a message in an alert box.
Explanation of Code:
The showAlert function displays an alert box with the message “This is an alert box!” when the button is clicked.
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript alert Example</title></head><body> <button onclick="showAlert()">Show Alert</button> <script> function showAlert() { alert("This is an alert box!"); } </script></body></html>
Using console.log()
The console.log() method is used to display output in the browser’s console, which is useful for debugging.
Explanation of Code:
The console.log method logs the message “This message is logged to the console.” to the browser’s console.
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript console.log Example</title></head><body> <script> console.log("This message is logged to the console."); </script></body></html>
JavaScript Labs
