HTML content modification using Javascript
JavaScript is the dynamic, lightweight and most commonly computer programming language used to create a web pages. It interact with client side and make dynamic pages.
JavaScript Can Change Content of HTML page: The getElementById() method is used to get the id of element and change the HTML content.
Example:
<!DOCTYPE html><html> <head> <title> Change HTML Content using Javascript </title></head> <body> <h1> GeeksforGeeks </h1> <h2> Change HTML Content using Javascript </h2> <p id="GFG"> GeeksforGeeks: A computer science portal </p> <button type="button" onclick= 'document.getElementById("GFG").innerHTML ="Welcome to GeeksforGeeks"'> Click Here! </button></body> </html> |
Output:
- Before Clicking the button:
- After Clicking the button:
JavaScript Can Change Styles of HTML page: JavaScript can be used to change the CSS property of HTML page.
Example:
<!DOCTYPE html><html> <head> <title> Change HTML Content using Javascript </title></head> <body> <h1> GeeksforGeeks </h1> <h2> Change HTML Content using Javascript </h2> <p id="GFG"> GeeksforGeeks: A computer science portal </p> <button type="button" onclick= "document.getElementById('GFG').style.fontSize= '25px'"> Click Here! </button></body> </html> |
Output:
- Before Clicking the button:
- After Clicking the button:
JavaScript Can Hide or Show HTML Elements: JavaScript can be used to change the display property to hide or show element content.
Example:
<!DOCTYPE html><html> <head> <title> Change HTML Content using Javascript </title></head> <body> <h1> GeeksforGeeks </h1> <h2> Change HTML Content using Javascript </h2> <p id="GFG"> GeeksforGeeks: A computer science portal </p> <button type="button" onclick= "document.getElementById('GFG').style.display= 'none'"> Click Here! </button></body> </html> |
- Output before clicking:
- Output after clicking:
.png)