How to use the @pluginjs/dom.append function in @pluginjs/dom

const baselineUl = parseHTML('<ul></ul>')
    let [start, end] = this.options.weekly.timeBetween.split('-')
    this.tableBegin = start
    start = parseInt(start.split(':')[0]) + 1 /* eslint-disable-line */
    end = parseInt(end.split(':')[0]) /* eslint-disable-line */
    this.timeDruation = end - start + 2
    for (let i = start; i &lt;= end; i++) {
      const time = String(i).length === 1 ? `0${i}:00` : `${i}:00`
      const li = `<li>
                      <span>${time}</span>
                    </li>`
      append(li, baselineUl)
    }

    append(baselineUl, this.$baseline)
    append(this.$baseline, this.element)
  }

buildBaseline() {
    this.$baseline = parseHTML(`<div class="${this.classes.BASELINE}"></div>`)

    const baselineUl = parseHTML('<ul></ul>')
    let [start, end] = this.options.weekly.timeBetween.split('-')
    this.tableBegin = start
    start = parseInt(start.split(':')[0]) + 1 /* eslint-disable-line */
    end = parseInt(end.split(':')[0]) /* eslint-disable-line */
    this.timeDruation = end - start + 2
    for (let i = start; i &lt;= end; i++) {
      const time = String(i).length === 1 ? `0${i}:00` : `${i}:00`
      const li = `<li>
                      <span>${time}</span>
                    </li>`
      append(li, baselineUl)
    }

    append(baselineUl, this.$baseline)
    append(this.$baseline, this.element)
  }

// init scrollable
    const $scorllWrap = parseHTML(
      `<div class="${
        this.classes.COLLECTIONSCROLLWRAP
      }"><div><div></div></div></div>`
    )
    prepend($scorllWrap, this.element)
    const scrollWrapChildren = children($scorllWrap)
      .filter(el =&gt; el.tagName === 'DIV')
      .map(el =&gt;
        children(el)
          .filter(el =&gt; el.tagName === 'DIV')
          .reduce((a, b) =&gt; a.concat(b))
      )
    scrollWrapChildren.map(append(this.$selectorList))

    return null
  }

words.forEach((word, index, array) => {
      if (!splitChar) {
        const newWord = document.createElement('span')
        text(word, newWord)
        addClass(this.classes.WORD, newWord)
        append(newWord, this.element)
      } else {
        const chars = word.split('')
        chars.forEach(char => {
          const newChar = document.createElement('span')
          text(char, newChar)
          addClass(this.classes.CHAR, newChar)
          append(newChar, this.element)
        })
      }

      if (index < array.length - 1) {
        const space = document.createElement('span')
        addClass(this.classes.SPACE, space)
        text(' ', space)
        append(space, this.element)
      }

}

    if (this.options.theme) {
      addClass(this.getThemeClass(), this.$loader)
    }

    if (this.options.background) {
      setStyle('background', this.options.background, this.$mask)
    }

    if (this.options.color) {
      setStyle('color', this.options.color, this.$loader)
    }

    if (this.options.text) {
      this.$text = append(
        `<div class="${this.classes.TEXT}">${this.options.text}</div>`,
        this.$mask
      )
    }

    this.enter('initialized')
    this.trigger(EVENTS.READY)
  }

resetHtml(ele) {
    this.hide()
    this.element = document.createElement('div')
    addClass(this.IS.classes.LOADER, this.element)

    append(ele, this.element)
  }

this.options.module.forEach(v => {
      const triggerClassName = `${this.classes.PANELTRIGGER}-${v}`
      const wrapClassName = `${this.classes.PANEL}-${v}`
      const colorClassName = `${this.classes.NAMESPACE}-${v}`
      const trigger = this.createEl(`${v}Trigger`, { class: triggerClassName })
      const wrap = this.createEl('moduleWrap', {
        classes: {
          wrapClassName,
          colorClassName
        }
      })
      append(trigger, query(`.${this.classes.PANELTRIGGER}`, this.$panel))
      append(wrap, query(`.${this.classes.PANELCONTAINER}`, this.$panel))
      if (this.options.module.length <= 1) {
        hideElement(query(`.${this.classes.PANELTRIGGER}`, this.$panel))
      }
    })

showNotFound() {
    if (this.notfound) {
      return
    }

    if (!this.$notFound) {
      this.$notFound = parseHTML(
        `<div class="${
          this.instance.classes.NOTFOUNDMENU
        }">${this.instance.translate('notFoundText')}</div>`
      )
    }
    append(this.$notFound, this.instance.$dropdown)
    addClass(this.instance.classes.NOTFOUND, this.instance.$dropdown)
    this.notfound = true
  }

wrapSelector += `.${this.getClass(
        this.classes.POSITION,
        'position',
        this.options.position
      )}`
    }

    this.$wrap = query(wrapSelector)

    if (!this.$wrap) {
      this.$wrap = parseHTML(
        templateEngine.render(this.options.templates.wrap.call(this), {
          classes: this.classes
        })
      )
      append(this.$wrap, window.document.body)
      this.position()
    } else if (!this.stack) {
      this.$wrap.innerHTML = ''
    }
  }

appendTo(el) {
    append(this.item, el)
  }