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

addEvent(data) {
    this.length++
    const e = this.createHtml(data)
    const point = query('span', e)
    setStyle('background-color', data.color, point)
    this.events.push(e)

    insertBefore(e, this.$more)
    this.update()

    // this.updateMore()
  }

buildDropdown() {
    insertBefore(this.fontFamily.$wrap, this.$Control)
    insertBefore(this.fontWeight.$wrap, this.$Control)
    insertBefore(this.fontSize.$wrap, this.$Control)
    insertBefore(this.lineHeight.$wrap, this.$Control)
    insertBefore(this.textAlign.$wrap, this.$Control)
  }

this.options.multiple ? 'multiple' : ''
      }/>`
    )
    this.select.innerHTML = this.buildOptions(items, 1)

    wrap(this.wrap, this.select)

    if (this.options.prependTo === null) {
      insertAfter(this.wrap, this.element)
    } else {
      const prependTo =
        typeof this.options.prependTo === 'string'
          ? this.options.prependTo
          : query(this.options.prependTo)

      insertBefore(this.wrap, prependTo)
    }
    this.enter('builded')
  }

this.PREVIEW = new Preview(this)
    this.IMAGE = new Image(this)

    this.value = this.element.value

    this.val(this.value, false)

    this.bind()

    if (this.element.disabled || this.options.disabled) {
      this.disable()
    }

    this.initDropdown(this.options.dropdown)

    insertBefore(this.POSITION.$wrap, this.$control)
    insertBefore(this.REPEAT.$wrap, this.$control)
    insertBefore(this.ATTACHMENT.$wrap, this.$control)
    insertBefore(this.SIZE.$wrap, this.$control)
    insertBefore(this.IMAGE.$wrap, this.$control)

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

) {
      return
    }

    const options = this.instance.options

    if (this.mode === 'drop') {
      if (options.navLabelSelector) {
        this.instance.navLabel = query(
          options.navLabelSelector,
          this.instance.element
        )
      } else {
        this.instance.navLabel = parseHTML(options.navLabelTpl)
        addClass(this.instance.classes.NAVLABEL, this.instance.navLabel)
        insertBefore(this.instance.navLabel, this.instance.$nav)
      }

      this.dropToggle(true)
    } else if (this.mode === 'scroll') {
      if (options.navWrapSelector) {
        this.instance.navWrap = query(
          options.navWrapSelector,
          this.instance.element
        )
      } else {
        const navWrap = parseHTML(options.navWrapTpl)
        addClass(this.instance.classes.NAVWRAP, navWrap)
        wrap(navWrap, this.instance.$nav)

        this.instance.navWrap = query(
          `.${this.instance.classes.NAVWRAP}`,

sort(oldIndex, newIndex = -1, dom = true) {
    if (oldIndex !== newIndex) {
      const item = this.data[oldIndex]

      if (newIndex <= -1) {
        newIndex = this.data.length - 1
      }

      if (dom) {
        const $item = this.getItem(oldIndex)
        const $new = this.getItem(newIndex)

        if (oldIndex > newIndex) {
          insertBefore($item, $new)
        } else {
          insertAfter($item, $new)
        }
      }

      if (oldIndex > newIndex) {
        this.data.splice(newIndex, 0, item)
        this.data.splice(oldIndex + 1, 1)
      } else {
        this.data.splice(newIndex + 1, 0, item)
        this.data.splice(oldIndex, 1)
      }

      this.trigger(EVENTS.SORT, oldIndex, newIndex, item)
    }
  }

showLoader() {
    if (!this.options.loader) {
      return
    }
    if (!this.$loader) {
      this.$loader = document.createElement('div')
      addClass(this.classes.LOADER, this.$loader)
      this.LOADER = Loader.of(this.$loader, this.options.loader)

      if (this.options.item && this.options.horizontal) {
        setStyle(this.getItemStyle(), this.$loader)
      }
    }
    insertBefore(this.$loader, this.$last)
    this.LOADER.show()
  }

if (this.hasPrev()) {
        if (this.prev) {
          this.prev.remove()
        }
        this.prev = parseHTML(this.generatePrev())
        insertAfter(this.prev, items[0])
      } else if (this.prev) {
        this.prev.remove()
      }

      if (this.hasNext()) {
        if (this.next) {
          this.next.remove()
        }
        this.next = parseHTML(this.generateNext())
        insertBefore(this.next, items[items.length - 1])
      } else if (this.next) {
        this.next.remove()
      }

      newPages.forEach(page => {
        if (oldPages.indexOf(page) === -1) {
          if (page < oldPages[0]) {
            const pagehtml = itemTemplate({
              classes: this.instance.classes,
              page
            })

            insertBefore(pagehtml, start)
          } else {
            const endEl = parseHTML(
              itemTemplate({

resolveEnd() {
    this.$end = parseHTML(
      template.compile(this.options.templates.end())({
        classes: this.classes,
        endText: this.translate('endText')
      })
    )
    insertBefore(this.$end, this.$last)
    if (this.options.trigger === 'button') {
      this.$button.remove()
    }
    this.trigger(EVENTS.END)
    this.enter('end')
  }