jQuery.parseHTML()的第二个参数如何使用

官方文档

参考文档

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

如果只有一个结点(document.createElement)：

<div>test</div>

• 使用document.createElement

  var d = document.createElement('div');
  d.innerHTML = 'test';
  document.appendChild(d);
  

如果有多个结点

• 创建一个新的结点，用innerHTML方法把字符串插到这个结点下面，这样，这个html代码就变成DOM啦！

  var html = '<div><span>node</span></div><div>node2</div>';
  var tempDiv = document.createElement('div');
  tempDiv.innerHTML = html; // 这样 html 就变成 DOM 了
  // 把 DOM 插入文档
  var nodes = tempDiv.childNodes;
  for (var i=0, length=nodes.length; i<length; i+=1) {
     // 容器container加载克隆的节点 - 克隆的作用是保证nodes的完整
     document.appendChild(nodes[i].cloneNode(true)); 
  }
  

优化

• 可以先将要加入的结点创建一个文档片段，然后一次性添加到document下面

  var nodes = tempDiv.childNodes, 
    fragment = document.createDocumentFragment(); //  创建文档片段
  
  for (var i=0, length=nodes.length; i<length; i+=1) {
     // 文档片段加载克隆的节点
     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 参数来使用。

返回值：

<script>
  var str = '<li>1</li><li>2</li><li>3</li><li>4</li><script type="text/javascript">console.log("执行脚本代码完成");<\/script>';
  var arr0 = $.parseHTML(str, true);
  console.log(arr0);
</script>