Add Solution for 'What is the Difference Between innerHTML and innerText?'

Hard/Difference-between-innerHTML-and-innerText.md

@@ -0,0 +1,145 @@
+## **What is the Difference Between `innerHTML` and `innerText`?**
+
+In JavaScript, the `innerHTML` and `innerText` properties are used to access or modify the content of HTML elements. While they may appear similar, they serve distinct purposes and have significant differences in their behavior and use cases.
+
+---
+
+## **1. What is `innerHTML`?**
+
+The `innerHTML` property retrieves or sets the **HTML content** of an element, including any nested tags and text. It treats the content as **HTML markup** and can parse and render tags accordingly.
+
+### **Key Features of `innerHTML`:**
+
+1. **Includes HTML Tags**: Can interpret and render nested HTML elements.
+2. **Modifies the DOM**: Changes to `innerHTML` replace the entire content of the element.
+3. **Potential Security Risks**: Using `innerHTML` with user input can lead to **Cross-Site Scripting (XSS)** vulnerabilities.
+4. **Slower for Large Content**: Re-rendering the DOM for changes can impact performance in large or complex HTML structures.
+
+### **Examples:**
+
+#### **Setting HTML Content:**
+
+```javascript
+const container = document.getElementById("example");
+container.innerHTML = "<strong>Hello, World!</strong>";
+```
+
+**Result in the DOM:**
+```html
+<div id="example"><strong>Hello, World!</strong></div>
+```
+
+#### **Getting HTML Content:**
+
+```javascript
+console.log(container.innerHTML); // Output: "<strong>Hello, World!</strong>"
+```
+
+- Returns the full HTML structure, including tags.
+
+---
+
+## **2. What is `innerText`?**
+
+The `innerText` property retrieves or sets the **text content** of an element as it is **rendered to the user**. It excludes any HTML tags and reflects only the visible text, ignoring hidden elements (e.g., elements with `display: none` or `visibility: hidden`).
+
+### **Key Features of `innerText`:**
+
+1. **Text-Only Content**: Ignores any HTML tags and only returns or sets plain text.
+2. **Excludes Hidden Elements**: Only considers elements that are visible on the page.
+3. **No Security Risks**: Does not interpret HTML tags, making it safe from XSS vulnerabilities.
+4. **Faster for Simple Text**: Does not involve DOM re-rendering for plain text manipulation.
+
+### **Examples:**
+
+#### **Setting Text Content:**
+
+```javascript
+const container = document.getElementById("example");
+container.innerText = "<strong>Hello, World!</strong>";
+```
+
+**Result in the DOM:**
+```html
+<div id="example">&lt;strong&gt;Hello, World!&lt;/strong&gt;</div>
+```
+
+- The `<strong>` tags are treated as plain text and escaped as `&lt;` and `&gt;`.
+
+#### **Getting Text Content:**
+
+```javascript
+console.log(container.innerText); // Output: "<strong>Hello, World!</strong>"
+```
+
+- Returns only the visible text, ignoring any HTML structure.
+
+---
+
+## **3. Key Differences Between `innerHTML` and `innerText`**
+
+| **Aspect**             | **`innerHTML`**                                      | **`innerText`**                                     |
+|-------------------------|-----------------------------------------------------|----------------------------------------------------|
+| **Purpose**             | Retrieves or sets the HTML markup and content.      | Retrieves or sets the visible text content only.   |
+| **Includes HTML Tags**  | Yes, includes all HTML tags.                        | No, excludes tags and shows plain text.            |
+| **Reflects Hidden Text**| Yes, includes text from hidden elements.            | No, ignores text from hidden elements.             |
+| **XSS Vulnerability**   | Yes, susceptible if user input is not sanitized.    | No, as it does not interpret HTML.                 |
+| **Performance**         | Can be slower for complex DOM manipulations.        | Faster for handling plain text.                    |
+
+---
+
+## **4. Practical Use Cases**
+
+### **Use `innerHTML` When:**
+
+- You need to dynamically insert or update HTML content.
+- Example: Rendering user-generated posts or building a list with nested elements.
+
+```javascript
+const list = ["Apple", "Banana", "Cherry"];
+const container = document.getElementById("example");
+
+container.innerHTML = `<ul>${list.map(item => `<li>${item}</li>`).join("")}</ul>`;
+// Result: A list with <ul> and <li> elements.
+```
+
+### **Use `innerText` When:**
+
+- You need to work with plain, visible text content.
+- Example: Updating or extracting the text from a paragraph or heading.
+
+```javascript
+const heading = document.getElementById("title");
+heading.innerText = "Welcome to JavaScript!";
+```
+
+---
+
+## **5. Security Considerations**
+
+- **`innerHTML`**: Use with caution, especially with user-provided data. Always sanitize input to prevent XSS attacks.
+- **`innerText`**: Safer for manipulating text as it does not interpret HTML.
+
+---
+
+## **6. Example: Combined Usage**
+
+```javascript
+const container = document.getElementById("example");
+container.innerHTML = "<strong>Hello</strong>, <em>World</em>!";
+
+// Access HTML and text content
+console.log(container.innerHTML); // Output: "<strong>Hello</strong>, <em>World</em>!"
+console.log(container.innerText); // Output: "Hello, World!"
+```
+
+---
+
+## **7. Summary**
+
+| **Property**    | **Description**                                            |
+|------------------|------------------------------------------------------------|
+| **`innerHTML`**  | Use to manipulate or retrieve HTML content, including tags. |
+| **`innerText`**  | Use to handle plain, visible text content without tags.     |
+
+By understanding the differences and appropriate use cases for `innerHTML` and `innerText`, you can write more efficient and secure JavaScript code.

Hard/README.md

@@ -7,7 +7,7 @@ This section contains advanced JavaScript interview questions. Click on each que
 3.  [Explain the working of the Event Loop.](Working-of-event-loop.md) ✅
 4.  [How can you remove duplicates from an array in JavaScript?](Remove-duplicates-from-array.md)
 5.  [What is memoization in JavaScript?](Memoization-in-JS.md)
-6.  [What is the difference between innerHTML and innerText?](Difference-between-innerHTML-and-innerText.md)
+6.  [What is the difference between innerHTML and innerText?](Difference-between-innerHTML-and-innerText.md) ✅
 7.  [Explain how localStorage, sessionStorage, and cookies differ.](Difference-between-localStorage-sessionStorage-cookies.md)
 8.  [What is destructuring in JavaScript, and how does it work?](Destructuring-in-JS.md)
 9.  [How can we handle callback hell situations?](Handling-callback-hell.md)
@@ -21,4 +21,4 @@ This section contains advanced JavaScript interview questions. Click on each que
 17. [How does garbage collection work in JavaScript?](Garbage-collection-in-JS.md)
 18. [What are Service Workers, and how are they used in JavaScript?](Service-workers-in-JS.md)
 19. [Explain the concept of Web Workers in JavaScript.](Web-workers-in-JS.md)
-20. [What is the difference between mutable and immutable objects in JavaScript?](Mutable-vs-immutable-objects.md)
+20. [What is the difference between mutable and immutable objects in JavaScript?](Mutable-vs-immutable-objects.md)