JavaScript innerHTML Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report The innerHTML property in JavScript is used to append the dynamic HTML or text content to an element using JavaScript. It is designed to add dynamic HTML, but developers also use it to add text content as well. It can be directly used with the element by selecting it using DOM manipulation. Syntax:selctedHTMLElement.innerHTML = "contentToAppend";Example 1: The below code shows a basic implementation of innerHTML property to append HTML directly to an element. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> JavaScript innerHTML </title> <style> #container{ text-align: center; } </style> </head> <body> <div id="container"> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> The below content is added dynamically using the innerHTML property in JavaScript. </h2> </div> <script> const container = document.getElementById('container'); container.innerHTML += ` <h3> Hey Geek, <br/> Welcome to GeeksforGeeks </h3> <p> This content is added using the innerHTML property. </p> `; </script> </body> </html> Output: Example 2: The below code implements the innerHTML property with click event to add HTML onclick to the button. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> JavaScript innerHTML </title> <style> #container { text-align: center; } </style> </head> <body> <div id="container"> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Click the below button to dynamically add the HTML using the innerHTML property. </h2> <button id="myBtn">Add HTML</button> </div> <script> const myBtn = document.getElementById('myBtn'); function clickHandler() { const container = document.getElementById('container'); container.innerHTML += ` <h3> Hey Geek, <br/> Welcome to GeeksforGeeks </h3> <p> This content is added using the innerHTML property. </p> `; } myBtn.addEventListener('click', clickHandler); </script> </body> </html> Output: Comment More infoAdvertise with us Next Article JavaScript innerHTML A abhish8rzd Follow Improve Article Tags : JavaScript Web Technologies Similar Reads HTML JavaScript HTML JavaScript is the most popular programming language that helps to add interactivity and provides dynamic behavior. It is known as the client-side scripting language for web pages. JavaScript is used for various purposes, including DOM manipulation, asynchronous requests (AJAX), event handling, 2 min read JavaScript HTML DOM The JavaScript HTML DOM (Document Object Model) is a powerful tool that represents the structure of an HTML document as a tree of objects. It allows JavaScript to interact with the structure and content of a webpage. By manipulating the DOM, you can update the content, structure, and styling of a pa 4 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 Difference between JavaScript and HTML JavaScriptJavaScript is a programming language that conforms to the ECMAScript specification. It is a high-level scripting language introduced by Netscape to be run on the client-side of the web browser. It can insert dynamic text into HTML. JavaScript is also known as the browser’s language. HTMLHT 2 min read HTML | DOM Script Object The DOM Script Object is used to represent the HTML <script> element. The script element is accessed by getElementById(). Properties: async: It is used to specify the script is executed asynchronously. charset: It is used to specify the character encoding used in an external script file. defer 2 min read Like