Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

jQuery与特殊元素的HTML操作

  现代浏览器中都支持对表格相关的元素的HTML文本操作,但IE从10才开始支持。那么在之前版本的IE上要如何对表格做HTML文本的操作呢?这个问题目前也没有什么神奇的解决方式,jQuery中虽然解决了这个问题,但它的实现依然是基于最原始的方式。
  下面这个测试是在IE9-上无法通过的
<table id="table"></table>
<script>
var html="<tr><td>test</td></tr>";
console.log(navigator.userAgent); //显示浏览器版本
try{
  table.innerHTML=html; //测试1
}catch(e){
  console.log(JSON.stringify(e,null,"  "));
};
try{
  table.insertAdjacentHTML("beforeend",html); //测试2
}catch(e){
  console.log(JSON.stringify(e,null,"  "));
};
</script>

  但在jQuery中我们可以这样写
<table></table>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$("table").append("<tr><td>test</td></tr>");
</script>
  为什么jQuery可以做到?实际上jQuery也只是对这些特殊的标记做了特殊处理。它会判断特定标签名,然后使用特定的包装。但它终究是通过innerHTML来解析的,如果我们传入不规范的HTML就会得到奇怪的结果
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
console.log($.parseHTML("<div></div><tr></tr>"));
console.log($.parseHTML("<tr></tr><div></div>"));
</script>
  jQuery对特殊元素的包装是根据第一个元素判断的。由于TR不能出现在TABLE之外,而DIV不能直接出现在TABLE的子节点中,所以产生了结果。所以jQuery的这个设计有一定的误导性,parseHTML并不是把传入的参数解析为一个文档片段,而是解析为某个元素的子元素,而且这“某个元素”是根据传入参数的第一个标记来确定的。当然,除此之外jQuery也提供的生成文档片段的方法,但是由于JavaScript的正则表达式不支持平衡组或递归匹配,而jQuery也不想麻烦的去自己分析传入的HTML,上面这种情况需要自己给HTML分段。
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
console.log($.buildFragment(["<div></div>","<tr></tr>"],document));
</script>
  另外要注意的是,这个buildFragment方法在低版本的jQuery中使用不同的参数列表。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^