DOM HELPER CLASS

107 0 0 0

Last Updated : 2020-10-24 12:21:35

In this class, we will have a helper class that will allow us to do the following: clear event listener from an element. move an element to another location ..etc

class DOMHelper {
static clearEventListener(element) {
const clonedElement = element.cloneNode(true);
element.replaceWith(clonedElement);
return clonedElement;
}

static moveElement(elementId, newDestinationSelector) {
const element = document.getElementById(elementId);
const destinationElement = document.querySelector(newDestinationSelector);

destinationElement.append(element);
}
}


  1. Move a DOM element :
    static moveElement(elementId, newDestinationSelector) {
    const element = document.getElementById(elementId); //Get old element
    const destinationElement = document.querySelector(newDestinationSelector); //Get destination element

    destinationElement.append(element);
    }​


  2. Clear attached Event listener: the idea is to re-assign the same element to itself one more time, So we will have a clone , assign it back to the same element using replaceWith method
    static clearEventListener(element) {
    const clonedElement = element.cloneNode(true); //Clone the element
    element.replaceWith(clonedElement); //Replace itself with the cloned one
    return clonedElement;
    }​


  3. -

Mohammed Anwar

Mohammed Anwar

Experienced technical lead PHP, MySQL and Laravel Developer for 15+ years, with proven ability to develop and create high-quality and optimized web applications. Great ability to build and optimize database design, schema and queries. Versed programing trainer and instructor delivering web courses and helping others to get into the field in a timely manner. Fast and eager learner for new technologies .