JavaScript innerHTML

Usage:

• The innerHTML property is used to access or modify the HTML content within an element.

Getting HTML Content:

• You can retrieve the HTML content of an element using the innerHTML property.

Setting HTML Content:

• You can set the HTML content of an element by assigning a new HTML string to the innerHTML property.

Example: Getting HTML Content

<div id="exampleDiv">This is the content</div>

var content = document.getElementById('exampleDiv').innerHTML;
console.log(content); // Output: This is the content

Example: Setting HTML Content

<div id="exampleDiv">Old content</div>

document.getElementById('exampleDiv').innerHTML = 'New content';

• After execution, the content of exampleDiv will be replaced with 'New content'.

Considerations:

• Modifying innerHTML will replace the existing content of the element.
• It's important to be cautious when using innerHTML with user-provided content to avoid security vulnerabilities like cross-site scripting (XSS) attacks.

 

Key Points

• innerHTML provides a convenient way to manipulate the HTML content of an element.
• It can be used to both retrieve and set the HTML content dynamically.
• However, care should be taken when using innerHTML to prevent security risks associated with injecting untrusted HTML content into the page.