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: