IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

javascript DOM操作中的insertAdjacentHTML方法

WEB前端开发 2014-09-17 13:40:44 累计浏览 1,352 次
本机暂存

插入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. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,346)
  2. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,401)
  3. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,932)
  4. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,845)
  5. 天朝第二代身份证号码的验证机制 (累计阅读 14,761)
  6. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  7. 分享一个JQUERY颜色选择插件 (累计阅读 14,222)
  8. 什么是全栈工程师? (累计阅读 14,035)
  9. 快速排序(Quicksort)的Javascript实现 (累计阅读 11,734)
  10. 7 天打造前端性能监控系统 (累计阅读 11,187)