IT技术博客大学习 共学习 共进步

javascript DOM操作中的insertAdjacentHTML方法

WEB前端开发 2014-09-17 13:40:44 浏览 1,302 次

插入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);

建议继续学习

  1. PHP Simple HTML DOM Parser 是一个不错的html/xml分析类 (阅读 6,943)
  2. 仅100行的JavaScript DOM操作类库 (阅读 4,382)
  3. phpQuery:像jQuery一样处理DOM (阅读 4,363)
  4. 获取Dom元素的X/Y坐标 (阅读 4,042)
  5. 对大量子节点DOM操作的最佳实践方式 (阅读 3,984)
  6. React入门:关于虚拟DOM(Virtual DOM) (阅读 3,562)
  7. DOM元素上jQuery事件几点学习 (阅读 3,302)
  8. 页面DOM加载顺序和用户视觉浏览顺序的一致性 (阅读 3,222)
  9. JS操作iframe里的dom (阅读 3,161)
  10. DOM Storage全解析 (阅读 3,101)