Simple collection of classes to create DOM elements with javascript

DMan.js

class D {
  // Initialize the constructor. An object is passed that specifies the DOM element to be created
  constructor(
    props = {
      el: "" /* Type of the DOM element */,
      cl: [] /* Class list */,
      id: "",
      src: "" /* This is also considered as the href for css elements */,
      href: "", /* Adds a ref for anchor elements or buttons [not to be confused with src] */
      name: "" /* Adds a name to the element */,
      style: "" /* Add single styles instead of classes */,
      event: [] /* 2 digit attay. First is the event, second is the function */,
      html: "",
      data: "",
      value: "",
      min: "",
      max: ""
    },
    el
  ) {
    this.props = props;
    this.el = el;
  }

  // Define the DOM Methods.
  /*  Creation methods
   *   Below, methods to create generic and specific DOM elements are defined.
   *   Each of these can be chained with add methods to place the elements at a specific position in the DOM.
   *   01) build() creates a fully custom element with the specified config
   *   02) buildCss() creates a style tag with the specified source. Optional parameters declare checksum and possible crossorigin settings
   *   03) buildJs() creates a script tag with the specified source. Optional parameters declare checksum and possible crossorigin settings
   *   04) buildImg() creates an image tag. Optional parameters delcares a basic responsiveness.
   */
  // build() creates an element and sets the el to the returned value
  build() {
    let element = document.createElement(this.props.el);
    // Set the element's props to the ones that have been passed into the constructor
    if (this.props.cl) {
      for (let i = 0; i < this.props.cl.length; i++) {
        element.classList.add(this.props.cl[i]);
      }
    }
    if (this.props.id) {
      element.id = this.props.id;
    }
    if (this.props.src) {
      element.src = this.props.src;
    }
    if (this.props.href) {
      element.href = this.props.href;
    }
    if (this.props.name) {
      element.name = this.props.name;
    }
    if (this.props.style) {
      element.style = this.props.style;
    }
    if (
      typeof this.props.event === "array" &&
      typeof this.props.event[1] === "function" &&
      this.props.event.length === 2
    ) {
      element.addEventListener(this.props.event[0], this.props.event[1]);
    }
    if (this.props.html) {
      element.innerHTML = this.props.html;
    }
    if (this.props.data) {
      element.data = this.props.data;
    }
    if (this.props.value) {
      element.value = this.props.value;
    }
    if (this.props.min) {
      element.min = this.props.min;
    }
    if (this.props.max) {
      element.max = this.props.max;
    }

    // Set the class's element to the newly created one.
    this.el = element;
    return this;
  }

  /*  Add methods
   *   Below, methods to add built elements to the DOM are declared.
   *   01) addToNode() places the element below the DOM - element, e.g. div, section, ...
   *   02) addToId() places the element below the DOM - element with the specified id
   *   03) addToClass() places the element below the DOM - element/s with the specified class
   *   04) addToHead() places the element in the end of the head - section
   *   05) addToBody() places the element in the end of the body - section
   */
  // Place the created element below each of the specified node
  addToNode(domNode) {
    document.getElementsByTagName(domNode).append(this.el);
    return this;
  }

  // Place the created element below the element with the specified
  addToId(domId) {
    document.getElementById(domId).append(this.el);
    return this;
  }

  // Place the created element below each element that has the defined class
  addToClass(domClass) {
    document.getElementsByClassName(domClass).append(this.el);
    return this;
  }

  // Place the created element in the head - section
  addToHead() {
    document.querySelector("head").append(this.el);
    return this;
  }

  // Place the created element in the body - sectiion
  addToBody() {
    document.querySelector("body").append(this.el);
    return this;
  }
}

// Class to add external files, like Javascript and CSS files
class DFile extends D {
    // buildCss creates a css element and sets the el to the returned value
    buildCss(checksum) {
      let element = document.createElement("link");
  
      element.rel = "stylesheet";
      element.type = "text/css";
      element.href = this.props.src;
      if (checksum) {
        element.integrity = checksum;
        element.crossOrigin = "anonymous";
      }
  
      this.el = element;
      return this;
    }
  
    // buildJs creates a javascript element and sets the el to the returned value
    buildJs(checksum) {
      let element = document.createElement("script");
  
      element.type = "text/javascript";
      element.src = this.props.src;
      if (checksum) {
        element.integrity = checksum;
        element.crossOrigin = "anonymous";
      }
  
      this.el = element;
      return this;
    }
}

// Class to add frames, like iframe and images.
class DFrame extends D {
    // buildImg creates a img - element and sets the source to the one specified in the config object
    buildImg(responsive) {
      let element = document.createElement("img");
  
      element.src = this.props.src;
      if (responsive) {
        element.style = "width: 100%; height: auto;";
      }
    }
}