JavaScript DOM Manipulator

call-dom-manipulator.js

const manipulator = new DOMManipulator();

// Create a new div element with an ID of "myDiv", a class of "myClass", and some content
const myDiv = manipulator.createElement('div', 'myDiv', 'myClass', 'Hello, world!', {
  'data-id': 123,
  'data-name': 'John Doe'
});

// Modify the div element to update its class and content, and add a new attribute
manipulator.modifyElement(myDiv, null, 'myOtherClass', 'Hello, world! How are you?', {
  'data-age': 28
});

// Delete the div element
manipulator.deleteElement(myDiv);

class-dom-manipulator.js

class DOMManipulator {
  // Method to create an HTML element
  createElement(elementType, elementId, elementClass, elementContent, attributes) {
    // Create the element
    const element = document.createElement(elementType);

    // Set the element's ID
    if (elementId) {
      element.id = elementId;
    }

    // Set the element's class
    if (elementClass) {
      element.className = elementClass;
    }

    // Set the element's content
    if (elementContent) {
      element.innerHTML = elementContent;
    }

    // Set the element's attributes
    if (attributes) {
      for (let attribute in attributes) {
        element.setAttribute(attribute, attributes[attribute]);
      }
    }

    // Return the element
    return element;
  }

  // Method to modify an HTML element
  modifyElement(element, elementId, elementClass, elementContent, attributes) {
    // Set the element's ID
    if (elementId) {
      element.id = elementId;
    }

    // Set the element's class
    if (elementClass) {
      element.className = elementClass;
    }

    // Set the element's content
    if (elementContent) {
      element.innerHTML = elementContent;
    }

    // Set the element's attributes
    if (attributes) {
      for (let attribute in attributes) {
        element.setAttribute(attribute, attributes[attribute]);
      }
    }
  }

  // Method to delete an HTML element
  deleteElement(element) {
    // Remove the element from the DOM
    element.parentNode.removeChild(element);
  }
}