兼容浏览器的insertAdjacentHTML

参数资料: 

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
https://developer.mozilla.org/en-US/docs/web/api/range/createcontextualfragment

首先是IE里有 insertAdjacentHTML，而且很好用。为了兼容其它浏览器就有了如下的函数“insertHTML”

重点：
1、为了兼容其它浏览器，支持beforeBegin、afterBegin、beforeEnd、afterEnd
2、如何将字符串String转换为文档碎片(fragment)或是Dom树(Dom tree)，因为使用innerHTML无法指定位置。

将字符串转换为Dom tree，参数这里：range.createContextualFragment，contextual翻译过来好像是“语境”的意思
range的起始位置的设置，参数setStartBefore、setStartAfter
下面就是完整的代码了（IE中可根据需要是否返回附加的dom）：

  /**
   * @desc 实现兼容浏览器版本的 insertAdjacentHTML
   *
   * @param {HTMLElement} el
   * @param {String} where beforeBegin、afterBegin、beforeEnd、afterEnd
   * @param {String} html
   */
  function insertHTML(el, where, html) {
    if (!el) {
      return false;
    }

    where = where.toLowerCase();

    if (el.insertAdjacentHTML) {//IE
      el.insertAdjacentHTML(where, html);
    } else {
      var range = el.ownerDocument.createRange(),
        frag = null;

      switch (where) {
        case "beforebegin":
          range.setStartBefore(el);
          frag = range.createContextualFragment(html);
          el.parentNode.insertBefore(frag, el);
          return el.previousSibling;
        case "afterbegin":
          if (el.firstChild) {
            range.setStartBefore(el.firstChild);
            frag = range.createContextualFragment(html);
            el.insertBefore(frag, el.firstChild);
          } else {
            el.innerHTML = html;
          }
          return el.firstChild;
        case "beforeend":
          if (el.lastChild) {
            range.setStartAfter(el.lastChild);
            frag = range.createContextualFragment(html);
            el.appendChild(frag);
          } else {
            el.innerHTML = html;
          }
          return el.lastChild;
        case "afterend":
          range.setStartAfter(el);
          frag = range.createContextualFragment(html);
          el.parentNode.insertBefore(frag, el.nextSibling);
          return el.nextSibling;
      }
    }
  }

参考 : https://blog.csdn.net/weixin_34211761/article/details/86446156