Activity 09: DOM Manipulation - Instructor Solution Guide

📋 Overview

This is the complete solution for Activity 09: DOM Manipulation. This directory contains working code that demonstrates all DOM concepts covered in the activity.

Purpose: Instructor reference for teaching, grading, and troubleshooting student work.

📁 Files Included

activity-09-dom/
├── script.js       ← Complete solution with detailed teaching comments
├── index.html      ← HTML structure (same as student template)
├── package.json    ← Project dependencies
├── setup.sh        ← Setup script for dev environment
└── README.md       ← This file (instructor guide)

🎯 Learning Objectives

By completing this activity, students will:

1. Select DOM elements using querySelector() and getElementById()
2. Create new elements using document.createElement()
3. Add elements to the DOM using appendChild()
4. Remove elements from the DOM using .remove()
5. Read user input from input fields using .value
6. Apply CSS classes dynamically using classList.add()
7. Handle events using onclick attribute
8. Build interactive features by combining DOM methods

🏗️ Exercise Breakdown

Exercise One: Adding Elements to the DOM (15 minutes)

Goal: Add a new list item "Milk" to an existing unordered list.

Key Concepts:

• document.querySelector("ul") - Selecting parent element
• document.createElement("li") - Creating new element
• .textContent - Setting element content
• .appendChild() - Adding element to DOM

Common Mistakes:

• ❌ Missing quotes: querySelector(ul) -> ✅ querySelector("ul")
• ❌ Wrong property: newli.text = "Milk" -> ✅ newli.textContent = "Milk"
• ❌ Creating but not appending element
• ❌ Using append() instead of appendChild() (support issues)

Success Criteria:

• "Milk" appears as third item in the list
• Item appears below "Coffee" and "Tea"
• Console shows no errors

Exercise 2: Removing Elements from the DOM (10 minutes)

Goal: Remove a paragraph element using the .remove() method.

Key Concepts:

• CSS class selector: .remove-me
• document.querySelector(".classname") - Selecting by class
• .remove() - Removing element from DOM

Common Mistakes:

• ❌ Wrong method: p.delete() -> ✅ p.remove()
• ❌ Missing dot: querySelector("remove-me") -> ✅ querySelector(".remove-me")
• ❌ Using querySelectorAll() instead of querySelector()
• ❌ Not checking if element exists before removing

Success Criteria:

• Paragraph with class "remove-me" disappears from page
• No errors in console
• Other elements remain unaffected

Exercise 3: Interactive Multiplication Calculator (20 minutes)

Goal: Create calculator that multiplies two numbers and displays result history.

Key Concepts:

• getElementById() - Selecting elements by ID
• .value - Reading input field values
• String concatenation - Building result text
• .classList.add() - Adding multiple CSS classes
• onclick event - Making button interactive
• Building calculation history (multiple results)

Common Mistakes:

• ❌ Missing onclick="calculate()" in HTML button
• ❌ Forgetting .value: num1 * num2 -> ✅ num1.value * num2.value
• ❌ Appending number instead of element: div.appendChild(answer) -> ✅ div.appendChild(newAnswer)
• ❌ Using + for calculation: "3" + "4" = "34" -> ✅ Use * or convert to Number
• ❌ Adding classes wrong: classList.add("text-success m-0") as one string
• ❌ Wrong selector: querySelector("num1") -> ✅ querySelector("#num1") or getElementById("num1")

Success Criteria:

• Clicking Calculate displays result (e.g., "3 x 4 = 12")
• Results appear in green text (Bootstrap text-success)
• Multiple calculations stack up as history
• Calculator works with decimals and negative numbers
• Console shows calculation logs

🧪 Testing Guide

Test Cases for Exercise 1

// Before running script:
- List should have 2 items: Coffee, Tea

// After running script:
- List should have 3 items: Coffee, Tea, Milk
- Milk should be last item
- All items should be <li> elements

Test Cases for Exercise 2

// Before running script:
- Paragraph with class="remove-me" should be visible
- Text should read "This paragraph should be removed!"

// After running script:
- Paragraph should be completely gone
- No empty space where paragraph was
- Other elements unaffected

Test Cases for Exercise 3

Additional Tests:

• Multiple calculations should stack (history feature)
• Results should be green text (text-success class)
• Results should have no margin (m-0 class)
• Button should be clickable multiple times

🎓 Teaching Notes

Key Teaching Points

1. The DOM is a Tree Structure

   • Every HTML element is a node
   • JavaScript can access and modify this tree
   • Changes happen in real-time (no page reload)

2. Elements vs Values

   • Elements are DOM objects
   • Values are data inside elements
   • Use .value for inputs, .textContent for most elements

3. Create Before Append

   • createElement() makes element in memory
   • Element invisible until appended
   • Can modify element before adding to DOM

4. CSS Selectors in JavaScript

   • Same syntax as CSS
   • .class for classes, #id for IDs
   • Element names without prefix

Discussion Questions

1. Why use JavaScript instead of HTML?

   • Dynamic content from user input
   • Interactive features (add/remove on click)
   • Data from APIs or databases

2. What's the difference between querySelector and getElementById?

   • getElementById() faster, only works with IDs
   • querySelector() flexible, works with any CSS selector
   • Both return single element or null

3. Why does multiplication work with string inputs?

   • JavaScript type coercion
   • * operator converts strings to numbers
   • + concatenates (watch out!)

4. Can we undo a .remove()?

   • Yes! Element still in memory if you have reference
   • Can re-append: parent.appendChild(removedElement)
   • Setting to null removes reference completely

Common Misconceptions

1. "Creating element adds it to page"

   • ❌ WRONG: createElement() only creates in memory
   • ✅ CORRECT: Must use appendChild() to add to DOM

2. "querySelector returns array"

   • ❌ WRONG: Returns single element (first match)
   • ✅ CORRECT: querySelectorAll() returns NodeList

3. ".value is a number for type='number'"

   • ❌ WRONG: Always returns string
   • ✅ CORRECT: JavaScript auto-converts for math operations

4. "onclick in HTML is bad practice"

   • ⚠️ DEBATABLE: Fine for learning and small projects
   • ✅ PRODUCTION: Use addEventListener() in real apps

🚀 Extension Challenges

Easy Extensions (5-10 minutes each)

1. Add Multiple Items

   javascript

   const items = ["Milk", "Juice", "Water"];
   items.forEach(item => {
       const li = document.createElement("li");
       li.textContent = item;
       ul.appendChild(li);
   });
   

2. Style New Elements

   javascript

   newli.classList.add("text-success");
   newli.style.fontWeight = "bold";
   

3. Add Clear Results Button

   javascript

   function clearResults() {
       const results = document.querySelectorAll("#calc p");
       results.forEach(p => p.remove());
   }
   

Medium Extensions (15-20 minutes each)

4. Input Validation

   javascript

   if (!num1.value || !num2.value) {
       alert("Please enter both numbers!");
       return;
   }
   

5. More Calculator Operations

   javascript

   function calculate(operation) {
       let answer;
       switch(operation) {
           case '+': answer = Number(num1.value) + Number(num2.value); break;
           case '-': answer = num1.value - num2.value; break;
           case '*': answer = num1.value * num2.value; break;
           case '/': answer = num1.value / num2.value; break;
       }
       // Display result...
   }
   

6. Remove Individual Results

   javascript

   // Add delete button to each result
   const deleteBtn = document.createElement("button");
   deleteBtn.textContent = "X";
   deleteBtn.onclick = () => newAnswer.remove();
   newAnswer.appendChild(deleteBtn);
   

Hard Extensions (30+ minutes each)

7. Keyboard Support

   javascript

   num2.addEventListener("keypress", (e) => {
       if (e.key === "Enter") calculate();
   });
   

8. Result Animations

   css

   @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
   }
   .result { animation: fadeIn 0.5s; }
   

9. Scientific Calculator

   • Power, square root, factorial
   • Use Math object methods
   • Advanced UI with more buttons

🐛 Troubleshooting Guide

"Nothing happens when I run the code"

Possible Causes:

1. Script loaded before HTML elements
   • ✅ Fix: Put <script> at bottom of <body>
2. JavaScript errors in console
   • ✅ Fix: Press F12, check Console tab for errors
3. Wrong file path in HTML
   • ✅ Fix: Verify <script src="script.js"> path

"Uncaught TypeError: Cannot read property 'appendChild' of null"

Cause: Selected element doesn't exist

Solutions:

• Check selector syntax: .class vs #id vs tag
• Verify element exists in HTML
• Check for typos in class/id names
• Add null check: if (element) { ... }

"Result shows '34' instead of '7' for 3+4"

Cause: String concatenation instead of addition

Solution:

// WRONG:
const answer = num1.value + num2.value; // "3" + "4" = "34"

// RIGHT:
const answer = Number(num1.value) + Number(num2.value); // 3 + 4 = 7

// OR use multiplication (auto-converts):
const answer = num1.value * num2.value; // "3" * "4" = 12 ✅

"Button doesn't work when clicked"

Possible Causes:

1. Missing onclick="calculate()" in HTML
   • ✅ Fix: Add onclick attribute to button
2. Function name mismatch
   • ✅ Fix: Ensure function name matches onclick value
3. Function not defined yet
   • ✅ Fix: Define function before button or use addEventListener

"New classes aren't added"

Cause: Wrong classList syntax

// WRONG:
element.classList = "text-success m-0"; // Overwrites entire classList
element.class = "text-success"; // Wrong property

// RIGHT:
element.classList.add("text-success");
element.classList.add("m-0");
// OR:
element.classList.add("text-success", "m-0");

📊 Assessment Rubric

Total Points: 100

Exercise One: Adding Elements (30 points)

• Correctly selects <ul> element (7 pts)
• Creates <li> element (8 pts)
• Sets textContent to "Milk" (7 pts)
• Appends element to list (8 pts)

Exercise 2: Removing Elements (20 points)

• Correctly selects element by class (10 pts)
• Removes element from DOM (10 pts)

Exercise 3: Calculator (40 points)

• Selects all required elements (10 pts)
• Creates calculate() function (10 pts)
• Performs calculation correctly (5 pts)
• Creates and populates paragraph element (8 pts)
• Adds CSS classes properly (4 pts)
• Appends result to div (3 pts)

Code Quality (10 points)

• Proper variable naming (3 pts)
• Code organization and structure (3 pts)
• Follows all instructions (4 pts)

Bonus Points (up to +10)

• Input validation (+3 pts)
• Error handling (+3 pts)
• Extension features (+4 pts)

Grading Scale

• 90-100: Excellent - All exercises working, clean code
• 80-89: Good - All exercises complete, minor issues
• 70-79: Satisfactory - Most exercises working, some errors
• 60-69: Needs Improvement - Some exercises incomplete
• Below 60: Not Passing - Major issues or incomplete

🎯 Quick Reference

Essential DOM Methods

// SELECTING ELEMENTS
document.querySelector("selector")     // Returns first match
document.querySelectorAll("selector")  // Returns all matches
document.getElementById("id")          // Returns element by ID

// CREATING ELEMENTS
document.createElement("tagname")      // Creates new element

// MODIFYING ELEMENTS
element.textContent = "text"           // Set text content
element.innerHTML = "<b>html</b>"      // Set HTML content (use carefully!)
element.value                          // Get/set input value

// ADDING ELEMENTS
parent.appendChild(child)              // Add as last child
parent.append(child1, child2)          // Add multiple (ES6+)
parent.prepend(child)                  // Add as first child

// REMOVING ELEMENTS
element.remove()                       // Remove from DOM
parent.removeChild(child)              // Older method

// CSS CLASSES
element.classList.add("class")         // Add class
element.classList.remove("class")      // Remove class
element.classList.toggle("class")      // Toggle class
element.classList.contains("class")    // Check if has class

// EVENT HANDLING
element.onclick = function() {}        // Property assignment
element.addEventListener("click", fn)  // Add listener (recommended)

CSS Selectors Quick Reference

// By tag name
document.querySelector("div")

// By class
document.querySelector(".classname")

// By ID
document.querySelector("#idname")

// By attribute
document.querySelector("[type='text']")

// Combined
document.querySelector("div.classname")
document.querySelector("ul li")

💡 Tips for Teaching This Activity

Before Class

1. Test the solution on same browser students will use
2. Prepare examples of DOM manipulation in real websites
3. Have DevTools open to show DOM tree
4. Prepare common error examples

During Class

1. Start with DevTools: Show DOM tree structure
2. Live code Exercise 1: Demonstrate step-by-step
3. Let students try Exercise 2: Circulate and help
4. Review Exercise 3 together: It's the most complex
5. Use console.log(): Show how to debug each step

Common Student Questions

Q: "Why do we need to select elements? Can't we just change HTML?" A: JavaScript runs AFTER HTML loads. We need to find elements to modify them dynamically based on user interaction.

Q: "What's the difference between textContent and innerHTML?" A: textContent sets plain text (safe), innerHTML parses HTML (powerful but risky with user input).

Q: "Why does my element not appear?" A: Did you append it? Creating an element doesn't add it to the page automatically.

Q: "Can I use jQuery instead?" A: Modern JavaScript (vanilla) is powerful enough. Learn fundamentals first!

Q: "Why use onclick instead of addEventListener?" A: For learning, onclick is simpler. In real projects, addEventListener is better (can have multiple listeners, easier to remove).

📚 Additional Resources

For Students

• MDN: Introduction to the DOM
• MDN: querySelector
• W3Schools: DOM Methods

For Instructors

• MDN: Manipulating documents
• JavaScript.info: Modifying the document
• DOM Enlightenment (free book)

🔄 Updates and Maintenance

Last Updated: October 2025 Author: Telebort Engineering Course: W2 Advanced JavaScript Foundations

Changelog:

• v1.0: Initial solution with comprehensive teaching notes
• Includes all three exercises with detailed explanations
• Added troubleshooting guide and assessment rubric
• Extension challenges for advanced students

📞 Support

For questions or issues with this solution:

1. Check the troubleshooting guide above
2. Review common mistakes in script.js comments
3. Test in browser DevTools (F12)
4. Contact course instructor

Remember: This is a teaching tool! The verbose comments are intentional to help instructors understand common pitfalls and teaching opportunities. Student-facing code should be cleaner and more concise.