How to use the @antv/dom-util.createDom function in @antv/dom-util

public _init_() {
    const containerTpl = this.get('containerTpl');
    const outterNode = this.get('canvas').get('el').parentNode;
    let container;
    if (!this.get('htmlContent')) {
      if (/^\#/.test(containerTpl)) {
        // 如果传入 dom 节点的 id
        const id = containerTpl.replace('#', '');
        container = document.getElementById(id);
      } else {
        container = domUtil.createDom(containerTpl);
      }
    } else {
      container = this._getHtmlContent();
    }
    this.set('container', container);
    domUtil.modifyCSS(container, this.style[CONTAINER_CLASS]);
    outterNode.appendChild(container);
    outterNode.style.position = 'relative';
  }

// 初始化 HTML dom
    const fontFamily = this.get('fontFamily');
    // const width = this.get('width');
    // const height = this.get('height');
    const layout = this.get('layout');
    const maxWidth = this.get('maxWidth');
    const maxHeight = this.get('maxHeight');
    const prefixClassName = this.get('prefixClassName');
    let containerTpl = this.get('containerTpl');
    if (!containerTpl) {
      containerTpl = `<div class="${prefixClassName}">
        <div class="${prefixClassName}-title"></div>
        <ul class="${prefixClassName}-list"></ul>
      </div>`;
    }
    const legendContainer = domUtil.createDom(containerTpl);
    const backgroundStyle = Util.deepMix({}, DEFAULT_THEME.backgroundStyle, this.get('backgroundStyle'));
    domUtil.modifyCSS(legendContainer, {
      fontFamily,
      maxHeight: `${maxHeight}px`,
      // width: 'auto',
      width: '100%',
      height: 'auto',
      ...backgroundStyle,
    });
    if (layout === 'horizontal') {
      domUtil.modifyCSS(legendContainer, {
        maxWidth: `${maxWidth}px`,
      });
    }

    let container = this.get('container');

style="display:inline-block;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);margin-left: 2px;">
        
        <span class="current-page-number">1</span> /  <span class="total-page-number">0</span>
        <div style="display:inline-block;-webkit-transform: rotate(45deg);transform: rotate(45deg);margin-right: 2px;" class="next-page">
        </div>
      
    `; // 分页器结构模板，目前不允许自定义

    if (pagination &amp;&amp; legendContainer.scrollHeight &gt; legendContainer.offsetHeight) {
      // 满足分页条件
      domUtil.modifyCSS(legendContainer, {
        overflow: 'hidden',
        height: `${this.get('maxHeight')}px`,
      }); // 如果允许分页，则禁止滚动
      const paginationDom = domUtil.createDom(paginationDomStr);
      legendContainer.appendChild(paginationDom);

      const legendContainerHeight = this.getHeight(); // legend 容器的高度
      const titleHeight = this.get('_titleContainer') ? domUtil.getOuterHeight(this.get('_titleContainer')) : 0; // Legend 标题的高度
      const paginationHeight = domUtil.getOuterHeight(paginationDom); // 分页器的高度
      const itemGroupContainerHeight = legendContainerHeight - titleHeight - paginationHeight; // 获取图例项容器的可视高度
      const itemGroupContainerOffsetHeight = itemGroupContainer.offsetHeight; // 获取图例项实际的高度

      // 剪切区域的样式设置
      const clipContainer = this.get('_clipContainer');
      domUtil.modifyCSS(clipContainer, {
        maxHeight: `${itemGroupContainerHeight}px`,
        overflow: 'hidden',
      });

      const pageSize = Math.ceil(itemGroupContainerOffsetHeight / itemGroupContainerHeight); // 计算页数

public _addItem(item: ToolTipContentItem, index: number) {
    const itemTpl = this.get('itemTpl'); // TODO: 有可能是个回调函数
    const itemDiv = Util.substitute(
      itemTpl,
      Util.mix(
        // @ts-ignore
        {
          // @ts-ignore
          index,
        },
        item
      )
    );
    const itemDOM = domUtil.createDom(itemDiv);
    domUtil.modifyCSS(itemDOM, this.style[LIST_ITEM_CLASS]);
    const markerDom = find(itemDOM, MARKER_CLASS);
    if (markerDom) {
      domUtil.modifyCSS(markerDom, this.style[MARKER_CLASS]);
    }
    const valueDom = find(itemDOM, VALUE_CLASS);
    if (valueDom) {
      domUtil.modifyCSS(valueDom, this.style[VALUE_CLASS]);
    }
    return itemDOM;
  }

Util.each(items, (item: CommonCfg, index: number) => {
      const checked = item.checked;
      const value = this.formatterValue(item.value); // 按照 formatter 配置格式化文本
      const originColor = item.marker.fill || item.marker.stroke;
      const color = checked ? originColor : unSelectedColor;
      let itemDom;
      if (Util.isFunction(itemTpl)) {
        // 用户声明了回调
        const domStr = itemTpl(value, color, checked, index);
        itemDom = domUtil.createDom(domStr);
      } else {
        itemDom = domUtil.createDom(itemTpl);
        const textDom = _findNodeByClass(itemDom, `${prefixClassName}-item-text`);
        textDom.innerHTML = value;
      }
      itemStyle.color = color; // 设置为当前状态对应的文本颜色
      markerStyle.backgroundColor = color; // 设置为当前状态 marker 的背景色

      domUtil.modifyCSS(itemDom, itemStyle);
      itemDom.setAttribute('data-checked', checked); // 存储当前的选中状态
      itemDom.setAttribute('data-value', item.value); // 存储 item 的原始值
      itemDom.setAttribute('data-color', originColor); // 存储 item 的原始颜色

      const markerDom = _findNodeByClass(itemDom, `${prefixClassName}-item-marker`);
      if (markerDom) {
        domUtil.modifyCSS(markerDom, markerStyle);

public _createDom(cfg: any) {
    const itemTpl = this.get('itemTpl');
    const str = Util.substitute(itemTpl, { text: cfg.text });
    return domUtil.createDom(str);
  }
  // 根据文本对齐方式确定dom位置

<div style="display:inline-block;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);margin-left: 2px;" class="pre-page">
        </div>
        <span class="current-page-number">1</span> /  <span class="total-page-number">0</span>
        <div style="display:inline-block;-webkit-transform: rotate(45deg);transform: rotate(45deg);margin-right: 2px;" class="next-page">
        </div>
      
    `; // 分页器结构模板，目前不允许自定义
    if (pagination &amp;&amp; legendContainer.scrollWidth &gt; legendContainer.offsetWidth) {
      // 满足分页条件
      domUtil.modifyCSS(legendContainer, {
        overflow: 'hidden',
        width: `${this.get('maxWidth')}px`,
      }); // 如果允许分页，则禁止滚动
      const paginationDom = domUtil.createDom(paginationDomStr);
      legendContainer.appendChild(paginationDom);

      const legendContainerWidth = this.getWidth(); // legend 容器的宽度
      // const titleHeight = this.get('_titleContainer') ?
      // Util.getOuterHeight(this.get('_titleContainer')) : 0;  // Legend 标题的高度
      const paginationWidth = domUtil.getOuterWidth(paginationDom); // 分页器的宽度
      const itemGroupContainerWidth = legendContainerWidth - paginationWidth - 40; // 获取图例项容器的可视宽度
      const itemGroupContainerOffsetWidth = itemGroupContainer.offsetWidth; // 获取图例项实际的宽度

      // 剪切区域的样式设置
      const clipContainer = this.get('_clipContainer');
      domUtil.modifyCSS(clipContainer, {
        maxWidth: `${itemGroupContainerWidth}px`,
        overflow: 'hidden',
      });

initPlugin(graph) {
    const parentNode = this.get('container');
    const ghost = createDom('<img style="opacity:0" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">');
    const children = parentNode.querySelectorAll('div &gt; .el-collapse-item &gt; .el-collapse-item__wrap &gt; .el-collapse-item__content &gt; img[data-item]');
    each(children,(child,i)=&gt;{
      const addModel = (new Function("return " + child.getAttribute('data-item')))();
      child.addEventListener('dragstart', e =&gt; {
        e.dataTransfer.setDragImage(ghost, 0, 0);
        graph.set('addNodeDragging',true);
        graph.set('addModel',addModel);
      });
      child.addEventListener('dragend', e =&gt; {
        graph.emit('canvas:mouseup',e);
        graph.set('addNodeDragging',false);
        graph.set('addModel',null);
      });
    })
  }