HTML content modification using JavaScript Last Updated : 08 Jun, 2023 Comments Improve Suggest changes Like Article Like Report JavaScript is the dynamic, lightweight, and most common computer programming language used to create web pages. It interacts with client-side and makes dynamic pages. JavaScript Can Change the Content of an HTML page. The getElementById() method is used to get the id of the element and change the HTML content. Example: In this example, we will change the content of the paragraph element. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Change HTML Content using JavaScript </title> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> Change HTML Content using Javascript </h3> <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: HTML content modification using JavaScript JavaScript Can Change Styles of the HTML page: JavaScript can be used to change the CSS property of an HTML page. Example: In this example, we will change the style of the paragraph element. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Change HTML Content using JavaScript </title> </head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3> Change HTML Content using Javascript </h3> <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: HTML content modification using JavaScript JavaScript Can Hide or Show HTML Elements: JavaScript can be used to change the display property to hide or show element content. To understand this feature refer to this Hide or show elements in HTML using display property article Comment More infoAdvertise with us Next Article HTML content modification using JavaScript J jeetesh16 Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to remove an HTML element using JavaScript ? Removing an HTML element using JavaScript involves deleting it from the DOM, typically using methods like element.remove() or parentNode.removeChild(). This approach updates the webpage dynamically, allowing for responsive interactions by removing unwanted or outdated elements based on user actions 3 min read Manipulating HTML Elements with JavaScript JavaScript is a powerful language that can be used to manipulate the HTML elements on a web page. By using JavaScript, we can access the HTML elements and modify their attributes, styles, and content. This allows us to create dynamic and interactive web pages. Methods to Identify the elements to man 5 min read How to Replace the Entire HTML Node using JavaScript? To replace an entire HTML node using JavaScript, you can use methods that allow you to remove an existing node and insert a new one in its place. Approach: Using replace() method Take the new document as a form of string(eg.. Str = '< html > < /html > '). Use .replace() method on the HTM 1 min read How to remove specific div element by using JavaScript? Removing a specific `<div>` element with JavaScript is crucial for dynamic web content management. Whether updating information, responding to user actions, or optimizing performance by cleaning the DOM, efficient DOM manipulation is essential. JavaScript offers diverse methods such as `remove 3 min read Different ways to access HTML elements using JavaScript Sometimes, users need to manipulate the HTML element without changing the code of the HTML. In this scenario, users can use JavaScript to change HTML elements without overwriting them. Before we move ahead to change the HTML element using JavaScript, users should learn to access it from the DOM (Doc 7 min read How to append HTML code to a div using JavaScript ? The ability to append HTML code to a <div> Using JavaScript helps enhance user experience by enabling dynamic content updates without reloading the page. This technique is widely used—over 85% of modern websites implement JavaScript DOM manipulation to create smoother and more interactive web 6 min read How to use innerHTML in JavaScript ? The innerHTML property in JavaScript allows you to get or set the HTML content of an element as a string. Syntax ForGetting HTML content of an element:let element = document.getElementById("myElementId"); let htmlContent = element.innerHTML;Setting HTML content of an element:let element = document.g 2 min read Remove & Add new HTML Tags using JavaScript In web development, dynamically add or remove HTML tags using JavaScript. This can be useful for creating interactive user interfaces and updating content based on user actions. Below are the approaches to remove and add new HTML tags using JavaScript: Table of Content Using createElement and remove 3 min read How to Create an Image Element using JavaScript? Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit 2 min read How to make Live Coding Editor using HTML CSS and JavaScript ? In this article, we will implement a live coding editor using HTML, CSS, and JavaScript. This project will allow you to write and execute HTML, CSS, and JavaScript code in real-time, making it an excellent tool for learning and testing your code snippets.Final OutputPrerequisiteHTMLCSSJavaScriptAppr 3 min read Like