What is JavaScript innerHTML and Examples

Table Of Contents
JavaScript inner
Examples of JavaScript innerHTML usages:
Conclusion
</div>
JavaScript inner

InnerHTML is a property in JavaScript that allows you to access or modify the content within an HTML element. It represents the markup (i.e., HTML code) contained within an element, including both the text and any nested HTML elements that may be present.
In addition, JavaScript innerHTML is a property that allows you to update the content of an HTML element with new text or HTML code dynamically.

Syntax:
To access the innerHTML of an element, you can use either of the following syntax:

element.innerHTML


or

document.getElementById('elementId').innerHTML


Examples of JavaScript innerHTML usages:


1. Updating Text Content:
You can update the plain text content of an HTML element using innerHTML. For example, consider the following HTML code:

<p id="myParagraph">This is an example paragraph.</p>


To change the text of the paragraph, you can use the innerHTML property as follows:

document.getElementById('myParagraph').innerHTML = "This is the updated paragraph.";


This will change the content of the paragraph to "This is the updated paragraph."

2. Updating HTML Content:
innerHTML also allows you to update the HTML content of an element. For example, consider the following HTML code:

HTML
<div id="myDiv">
  <h2>My Heading</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>


To change the HTML content of the div element, you can use innerHTML property as follows:

JavaScript
document.getElementById('myDiv').innerHTML = "<h2>New Heading</h2><p>This is a new paragraph.</p>";


This will change the content of the div to the updated HTML code.

3. Creating Dynamic HTML:
Using innerHTML, you can also dynamically create HTML elements. For example, consider the following HTML code:

<div id="myDiv"></div>


To create an unordered list inside the div dynamically, you can use the innerHTML property as follows:

var list = "<ul>";
list += "<li>Item 1</li>";
list += "<li>Item 2</li>";
list += "</ul>";

document.getElementById('myDiv').innerHTML = list;


This will create the unordered list dynamically inside the div element.

4. Event Binding:
You can also use innerHTML to bind event handlers to dynamically created elements. For example, consider the following HTML code:

<button onclick="addNewElement()">Add New Element</button>
<div id="myDiv"></div>


To dynamically add a new div with a click event handler, you can use innerHTML property as follows:

function addNewElement() {
  var newDiv = document.createElement("div");
  newDiv.innerHTML = "New Content";
  newDiv.onclick = function() {
    alert("Clicked on new element!");
  };

  document.getElementById('myDiv').appendChild(newDiv);
}


This will add a new div with the content "New Content" and an onclick event handler to the existing div element when the button is clicked.

Conclusion

Overall, innerHTML is a powerful tool in JavaScript for updating and manipulating the content of HTML elements dynamically. However, it is important to be cautious when using innerHTML to prevent cross-site scripting (XSS) attacks by sanitizing any user-generated content before updating the innerHTML.

See Demo | Download File