feat(curriculum): Add interactive examples to innerText, textContent and innerHTML lesson (#63449)

curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-the-difference-between-innertext-textcontent-and-innerhtml
 ---
 
-# --description--
+# --interactive--
 
 Let's learn about `innerText`, `textContent`, and `innerHTML`.
 
@@ -26,11 +26,23 @@ For example, here you can see a `div` element that contains two paragraphs:
 
 If we get a reference to this HTML element in our JavaScript code using `getElementById()`, we can access the `innerText` property of this element:
 
+:::interactive_editor
+
+```html
+<div id="container">
+  <p>Hello, World!</p>
+  <p>I'm learning JavaScript</p>
+</div>
+<script src="index.js"></script>
+```
+
 ```js
 const container = document.getElementById("container");
 console.log(container.innerText);
 ```
 
+:::
+
 This is the inner text of this element:
 
 ```md
@@ -44,6 +56,8 @@ You should know that `innerText` only returns the text that is visible at the pa
 
 This is an example where the second paragraph is hidden:
 
+:::interactive_editor
+
 ```html
 <div id="container">
   <p>Hello, World!</p>
@@ -51,24 +65,46 @@ This is an example where the second paragraph is hidden:
 </div>
 ```
 
+:::
+
 If we try to log the `innerText` again, now the output won’t have the text of the second paragraph:
 
+:::interactive_editor
+
+```html
+<div id="container">
+  <p>Hello, World!</p>
+  <p hidden>I'm learning JavaScript</p>
+</div>
+<script src="index.js"></script>
+```
+
 ```js
+const container = document.getElementById("container");
 console.log(container.innerText);
 ```
 
-This will be the output:
-
-```md
-Hello, World!
-```
+:::
 
 You can set the `innerText` of an HTML element like this, but this will replace the existing text and add a line break element (`br`) element for every line break:
 
+:::interactive_editor
+
+```html
+<div id="container">
+  <p>Hello, World!</p>
+  <p>I'm learning JavaScript</p>
+</div>
+<script src="index.js"></script>
+```
+
 ```js
+const container = document.getElementById("container");
 container.innerText = "JavaScript is awesome!";
 ```
 
+:::
+
 Since `innerText` takes visibility into account, getting its value triggers a process called "reflow", that recalculates the position of certain elements on the website. This process can be computationally intensive, so you should avoid triggering it if possible.
 
 Great. Now let's talk about `textContent`. 
@@ -88,41 +124,63 @@ Here we have the same example in HTML:
 
 If you try to access this property, you'll see the text of the element and its descendants as the output, keeping the indentation and spacing:
 
+:::interactive_editor
+
+```html
+<div id="container">
+  <p>Hello, World!</p>
+  <p>I'm learning JavaScript</p>
+</div>
+<script src="index.js"></script>
+```
+
 ```js
 const container = document.getElementById("container");
 console.log(container.textContent);
 ```
 
-```md
-Hello, World!
-I'm learning JavaScript
-``` 
+:::
 
 If an HTML element is not visible, like you can see over here, where we’ve hidden the second paragraph, its text will still be included in this property:
 
+:::interactive_editor
+
 ```html
 <div id="container">
   <p>Hello, World!</p>
   <p hidden>I'm learning JavaScript</p>
 </div>
+<script src="index.js"></script>
 ```
 
-You will see the same output:
+```js
+const container = document.getElementById("container");
+console.log(container.textContent);
+```
 
-```md
-Hello, World!
-I'm learning JavaScript
-``` 
+:::
   
 `textContent` will also include the content of elements like `script` and `style`.
 
 If you try to replace the value of `textContent` on a node, it will remove all its child nodes and replace them with a single text node containing the new string:
 
+:::interactive_editor
+
+```html
+<div id="container">
+  <p>Hello, World!</p>
+  <p hidden>I'm learning JavaScript</p>
+</div>
+<script src="index.js"></script>
+```
+
 ```js
 const container = document.getElementById("container");
-container.textContent = "Hello, World!";
+container.textContent = "New content";
 ```
 
+:::
+
 And finally, let's talk about how `textContent` and `innerText` differs from `innerHTML`.
 
 Remember that with `innerHTML` you can set the inner HTML content of an element. This is helpful for injecting new HTML into the DOM dynamically.