这个简单,我们可以用document.createElement来把这段 html 变成 DOM,并插入页面文档中,例如:
var d = document.createElement('p'); d.innerHTML = 'test'; document.appendChild(d);
但是,如果 html 字符串复杂一点,有多个结点怎么办呢?
那样我们就创建一个新的结点,然后用 innerHTML 方法把字符串插入到这个结点下,这样,这个 html 代码就变成 DOM 了,例如
var html = '
node
node2
'; var tempp = document.createElement('p'); tempp.innerHTML = html; // 这样 html 就变成 DOM 了 // 把 DOM 插入文档 var nodes = tempp.childNodes; for (var i=0, length=nodes.length; i
函数干啥的
这个函数的作用就是把一段 html 字符串变成 DOM。
字符串变成 DOM 的原理
如果只有一个结点,例如
这个简单,我们可以用
document.createElement
来把这段 html 变成 DOM,并插入页面文档中,例如:但是,如果 html 字符串复杂一点,有多个结点怎么办呢?
那样我们就创建一个新的结点,然后用 innerHTML 方法把字符串插入到这个结点下,这样,这个 html 代码就变成 DOM 了,例如
但是,我们这样循环插入结点,在某些“高级“浏览器下,他就抓狂了。
于是,我们就考虑做一个文档片段,然后把这些结点插入到文档片段中,然后一次性塞到 document 下面。这样性能就好多了。例如
看到没,代码里面的
document.createDocumentFragment()
,这个就是 jQuery 文档描述中的第二个参数的用途。如果不设置第二个参数,那 context 的默认值就是 document,于是就是document.createDocumentFragment()
; 如果你设置了其他的值,那就相当于是context.createDocumentFragment()
。明白了吧,而
createDocuemntFragment
是document
的一个方法,所以第二个参数必须提供document
的部分方法便可。什么样的对象能作为 jQuery.parseHTML 的第二个参数
阅读源码后,发现
jQuery.parseHTML
还使用了createDocumentFragment
,createTextNode
,createElement
。只要一个 Object 提供了以上三个接口,并且接口的返回值能够支持Element
对象的部分接口,该对象便可作为jQuery.parseHTML
的 context 参数来使用。总结 应用场景
1.使用 iframe 的 document
可能在某些场景我们需要使用 iframe 下的 document 作为 context,这种情况就需要主动传递该参数给 jQuery.HTML 了。
2.iframe 内使用 parent 的 document
同上……
其实还可以玩点花样,比如 hook 一下,让 jQuery.parseHTML 的时候在结果里面添加 class,增加额外的元素等等。但是要 ES5 支持。这里就不放 demo 了
但是纯文本的话,可以 mock 一个
context.createTextNode
,实现在文本前后加额外字符。示例http://jsfiddle.net/S4SfZ/
部分内容参考 http://www.zhangxinxu.com/wordpress/2013/05/js-dom-basic-useful-method/
写这么长,我自己都觉得自己无聊啊……