章节
问答
课签
笔记
评论
占位
占位

innerHTML的缺陷

对于节点的创建innerHTML是一个很高效的接口。jQuery在节点操作上使用了innerHTML,创建效率上来说至少比createElement快了2-10倍不等,而且还能一次性生成一堆的节点,但是随之而来就有一些兼容性问题,

我总结了有以下几点,当然兼容上也结合了jQuery的解决方案。

  1.   IE会对用户字符串进行trimLeft操作,用户可能的本意就是需要空白
  2.   IE8有些元素innerHTML是只读
  3.   IE会忽略开头的无作用域元素
  4.   大多情况下不执行script脚本,当然如果支持defer的IE9之前的浏览器除外
  5.   一些标签不能作为div的子元素,如tr,tb, col等

jQuery的节点操作最终是需要转化成文档碎片也就是要通过buildFragment()方法处理的,所以innerHTML兼容的修复也自然在buildFragment方法中。

我们弄清了缘由再去分析,其实整个修正的代码就很简单了。

1:首先无作用域的问题,通过文档碎片创建一个div的包含容器,让所有的元素都被div元素给包含起来,包括script,style等无作用域的元素,很好的解决了

tmp = tmp || fragment.appendChild(context.createElement("div"));
tmp.innerHTML = elem

2:针对不支持innerHTML属性的元素,给单独提出来,通过正则抽出来这个节点名字去处理

wrapMap = {
     tr: [2, "<table><tbody>", "</tbody></table>"],
}
tag = /<([\w:]+)/.exec(‘<tr>慕课网</tr>’)
wrap = wrapMap[tag] || wrapMap._default;
tmp.innerHTML = wrap[1] + elem.replace(rxhtmlTag, "<$1></$2>") + wrap[2];

如果遇到wrapMap[‘tr’]的标签就会自动包装一层节点,这样达到支持。

任务

?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?