JavaScript innerHTML
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;"> w3wiki </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 w3wiki </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;"> w3wiki </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 w3wiki </h3> <p> This content is added using the innerHTML property. </p> `; } myBtn.addEventListener('click', clickHandler); </script></body></html> |
Output:
Contact Us