兼容浏览器的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