DOM Manipulation: Creating, Inserting, and Removing Elements

Beyond modifying existing elements, JavaScript allows you to dynamically build and change the structure of your web page. This involves creating new HTML elements from scratch, placing them strategically within the DOM tree, and removing existing ones when they are no longer needed.

These operations are fundamental for single-page applications, dynamic forms, content loading, and interactive user interfaces.

---

1. Creating New Elements: document.createElement()

The document.createElement() method is your entry point for generating new HTML elements that don't yet exist on the page. It creates an element node with the specified tag name.

• Syntax: document.createElement(tagName)
  • tagName: A string specifying the type of element to be created (e.g., 'div', 'p', 'img', 'button').
• Returns: A new Element object.
• Key Point: Creating an element only makes it exist in memory; it is not automatically added to the DOM. You must use an insertion method to make it visible on the page.

---

2. Inserting Elements: appendChild(), prepend(), insertBefore()

Once you have a created element, you need to insert it into the existing DOM tree to make it visible and interactive.

a) parentNode.appendChild(childElement)

• Purpose: Inserts a node as the last child of a specified parent node.
• Returns: The appended child node.
• Key Point: If the child node already exists in the DOM, appendChild() moves it from its current position to the new one.

b) parentNode.prepend(childElement) (ES6+)

• Purpose: Inserts a node as the first child of a specified parent node.
• Returns: undefined.
• Key Point: Similar to appendChild(), if the child node already exists, prepend() moves it.

c) parentNode.insertBefore(newElement, referenceElement)

• Purpose: Inserts a newElement immediately before a referenceElement (which must be a child of parentNode).
• Returns: The inserted newElement.
• Key Point: Provides more precise control over where an element is inserted relative to its siblings.

---

3. Removing Elements: removeChild(), element.remove()

Just as you can add elements, you can also remove them from the DOM.

a) parentNode.removeChild(childElement)

• Purpose: Removes a specified child node from the DOM. You must call this method on the parent of the child you want to remove.
• Returns: The removed node.
• Key Point: The childElement must be a direct child of the parentNode on which removeChild() is called. If not, it will throw an error.

b) element.remove() (Modern & Simpler - ES6+)

• Purpose: Removes the element from the DOM. This is a simpler and more direct way to remove an element, as you call it directly on the element you want to remove, without needing a reference to its parent.
• Returns: undefined.

---

Exercise: Dynamic List Manager

Instructions: Create a simple "To-Do List" interface that allows users to add and remove items dynamically.

<div id="app">
  <h1>My To-Do List</h1>
  <input type="text" id="todoInput" placeholder="Add a new to-do">
  <button id="addTodoBtn">Add To-Do</button>
  <ul id="todoList" style="border: 1px dashed lightgrey; padding: 10px; margin-top: 10px;">
    <!-- To-Do items will go here -->
  </ul>
</div>

Your Task:

1. Add To-Do Item:
   • Select todoInput, addTodoBtn, and todoList.
   • When addTodoBtn is clicked:
     • Get the value from todoInput.
     • If the value is empty, alert (or log an error message) and do nothing.
     • Create a new <li> element.
     • Set its textContent to the input value.
     • Create a "Remove" button (<button>) for this <li>.
     • Append the "Remove" button to the <li>.
     • Add an event listener to this "Remove" button: when clicked, it should remove its parent <li> element from the todoList.
     • Append the new <li> to todoList.
     • Clear the todoInput field.
2. Initial Items (Optional but good practice): Add a few dummy <li> items directly to todoList in the HTML, each with a "Remove" button configured to work as above.