Technical Implementation of Adding and Removing HTML Elements Using JavaScript

Technical Principles of Dynamic HTML Element Manipulation

In modern web development, dynamic content management is a crucial capability for building interactive applications. JavaScript provides rich DOM manipulation APIs that enable developers to adjust page structure in real-time based on user behavior. This capability is particularly important for scenarios such as form field expansion, list item management, and content editing.

Core Implementation Methods

Based on the fundamental principles of DOM manipulation, we can implement dynamic element addition and removal through the following steps:

Element Creation and Insertion

Using the document.createElement() method to create new DOM elements is the most fundamental operation. This approach provides precise control over element attributes, ensuring the generated HTML structure meets expectations.

function addRow() {
  const div = document.createElement('div');
  div.className = 'row';
  
  div.innerHTML = `
    <input type="text" name="name" value="" />
    <input type="text" name="value" value="" />
    <label> 
      <input type="checkbox" name="check" value="1" /gt; Checked? 
    </label>
    <input type="button" value="-" onclick="removeRow(this)" />
  `;

  document.getElementById('content').appendChild(div);
}

In this implementation, we first create a div container element and add the row class name for styling control. Through the innerHTML property, we efficiently set the internal HTML structure, including text input fields, checkboxes, and delete buttons.

Element Removal Mechanism

Removal operations require precise targeting of the element to be deleted and its removal from the DOM tree. The traditional method uses removeChild(), which requires obtaining a reference to the parent element first:

function removeRow(input) {
  document.getElementById('content').removeChild(input.parentNode);
}

This method passes the button element through the this parameter, then accesses its parentNode to locate the entire row element for deletion.

Modern Removal Method Improvements

With the evolution of web standards, modern browsers provide a more concise remove() method. This method acts directly on the element itself without requiring explicit reference to the parent node:

function removeRowModern(button) {
  button.parentNode.remove();
}

The Element.remove() method has been widely supported since 2015, featuring concise syntax and reliable functionality. If an element has no parent node, calling this method has no effect, providing additional safety.

Performance Optimization Considerations

In scenarios involving frequent DOM operations, performance optimization is crucial. Here are some key recommendations:

• Batch Operations: Minimize the number of DOM operations by using document fragments for batch insertion
• Event Delegation: Utilize event bubbling mechanism to listen for events on parent elements, reducing the number of event handlers
• Memory Management: Promptly remove references to elements that are no longer needed to avoid memory leaks

Practical Application Scenarios

This dynamic element management technology is widely applied in:

• Adding and removing dynamic form fields
• Shopping cart item list management
• Interactive operations for to-do lists
• Building dynamic configuration interfaces

Through proper design and implementation, developers can create responsive web applications with excellent user experience.