插入HTML内容与文本内容以前用的是innerHTML与innerText方法,今天微博上看到《JavaScript insertAdjacentHTML and beforeend》这篇文章,重新勾起对insertAdjacentHTML和 insertAdjacentText方法回忆,以前网上有个比较靠谱的兼容方法:
/** * @param {HTMLElement} el * @param {String} where beforeBegin、afterBegin、beforeEnd、afterEnd * @param {String} html */function insertHTML(el, where, html){if(!el){returnfalse;}where = where.toLowerCase();if(el.insertAdjacentHTML){//IEel.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);