jq怎么添加html参数,jQuery.parseHTML()的第二个参数如何使用？

函数干啥的

这个函数的作用就是把一段 html 字符串变成 DOM。

字符串变成 DOM 的原理

如果只有一个结点，例如

test

这个简单，我们可以用 document.createElement 来把这段 html 变成 DOM，并插入页面文档中，例如：

var d = document.createElement('div');

d.innerHTML = 'test';

document.appendChild(d);

但是，如果 html 字符串复杂一点，有多个结点怎么办呢？

那样我们就创建一个新的结点，然后用 innerHTML 方法把字符串插入到这个结点下，这样，这个 html 代码就变成 DOM 了，例如

var html = '

node

node2

';

var tempDiv = document.createElement('div');

tempDiv.innerHTML = html; // 这样 html 就变成 DOM 了

// 把 DOM 插入文档

var nodes = tempDiv.childNodes;

for (var i=0, length=nodes.length; i

// 容器container加载克隆的节点 - 克隆的作用是保证nodes的完整

document.appendChild(nodes[i].cloneNode(true));

}

但是，我们这样循环插入结点，在某些“高级“浏览器下，他就抓狂了。

于是，我们就考虑做一个文档片段，然后把这些结点插入到文档片段中，然后一次性塞到 document 下面。这样性能就好多了。例如

var nodes = tempDiv.childNodes,

fragment = document.createDocumentFragment(); // 创建文档片段

for (var i=0, length=nodes.length; i

// 文档片段加载克隆的节点

fragment.appendChild(nodes[i].cloneNode(true));

}

// 一次性全塞给 document

document.appendChild(fragment);

看到没，代码里面的 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，实现在文本前后加额外字符。示例

写这么长，我自己都觉得自己无聊啊……