feat(curriculum): Add interactive examples to adding and removing nodes lesson (#63450)

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

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-do-you-add-and-remove-nodes-from-the-dom-with-appendchild-and-removechild
 ---
 
-# --description--
+# --interactive--
 
 There will be times where you will need to add or remove nodes from the DOM and there are a couple of Web APIs you can use.
 
@@ -58,8 +58,37 @@ dessertsList.appendChild(listItem);
 
 If you were to run this code, you will see that a new list item element is added to the end of the list of children of the `ul` element.
 
+:::interactive_editor
+
+```html
+<ul id="desserts">
+  <li>Cake</li>
+  <li>Pie</li>
+</ul>
+<script src="index.js"></script>
+```
+
+```js
+const dessertsList = document.getElementById("desserts");
+const listItem = document.createElement("li");
+
+dessertsList.appendChild(listItem);
+```
+
+:::
+
 The problem is that the new list item element is empty. To add text content to the new list item element, you can use the `textContent` property:
 
+:::interactive_editor
+
+```html
+<ul id="desserts">
+  <li>Cake</li>
+  <li>Pie</li>
+</ul>
+<script src="index.js"></script>
+```
+
 ```js
 const dessertsList = document.getElementById("desserts");
 const listItem = document.createElement("li");
@@ -68,6 +97,8 @@ listItem.textContent = "Cookies";
 dessertsList.appendChild(listItem);
 ```
 
+:::
+
 Now the list will show `Cake`, `Pie`, and `Cookies`.
 
 To remove a node from the DOM, you can use the `removeChild()` method.
@@ -105,6 +136,17 @@ We are using the `:last-of-type` pseudo-class to select the last paragraph eleme
 
 Now that we have the parent and child nodes, we can remove the last paragraph element from the `section` element using the `removeChild()` method:
 
+:::interactive_editor
+
+```html
+<section id="example-section">
+  <h2>Example sub heading</h2>
+  <p>first paragraph</p>
+  <p>second paragraph</p>
+</section>
+<script src="index.js"></script>
+```
+
 ```js
 const sectionEl = document.getElementById("example-section");
 const lastParagraph = document.querySelector("#example-section p:last-of-type");
@@ -112,14 +154,7 @@ const lastParagraph = document.querySelector("#example-section p:last-of-type");
 sectionEl.removeChild(lastParagraph);
 ```
 
-Here is the new HTML markup after removing the last paragraph element:
-
-```html
-<section id="example-section">
-  <h2>Example sub heading</h2>
-  <p>first paragraph</p>
-</section>
-```
+:::
 
 So, when might you want to add or remove nodes from the DOM?