标签：jquery 表示 null var 完整 element java his 位置
DocumentFragment 接口表示文档的一部分（或一段）。更确切地说，它表示一个或多个邻接的 Document 节点和它们的所有子孙节点。 DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。 不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作，尤其是与 Range 接口一起使用时更是如此。 可以用 Document.createDocumentFragment() 方法创建新的空 DocumentFragment 节点。 也可以用 Range.extractContents() 方法 或 Range.cloneContents() 方法 获取包含现有文档的片段的 DocumentFragment 节点。
通常我们插入文档的操作如下:
var nodes = div.childNodes; for (var i=0, length=nodes.length; i<length; i+=1) { // 容器container加载克隆的节点 - 克隆的作用是保证nodes的完整 container.appendChild(nodes[i].cloneNode(true)); }
这样会导致浏览器不断的reflow 重绘，对性能造成影响。我们可以利用documentFragment的特点：
HTMLElement.prototype.appendHTML = function(html) {
var divTemp = document.createElement("div"), nodes = null
, fragment = document.createDocumentFragment();
divTemp.innerHTML = html;
nodes = divTemp.childNodes;
for (var i=0, length=nodes.length; i<length; i+=1) {
fragment.appendChild(nodes[i].cloneNode(true));
}
this.appendChild(fragment);
nodes = null;
fragment = null;
};
只有一次~~~。
对于直接用innerHTML的方法，如果插入的元素要有什么click事件的绑定，当再次插入的时候事件就没了。这种情况下用使用事件的委托来搞定。比如：Jquery的on方法
insertAdjacentHTML
insert(插入)Adjacent(邻近)HTML。
语法如下：
element.insertAdjacentHTML(position, html);
position是相对于element元素的位置，并且只能是以下的字符串之一：
beforebeginelement 元素的前面。afterbeginelement 元素的第一个子元素前面。beforeendelement 元素的最后一个子元素后面。afterendelement 元素的后面。html是字符串被解析成HTML或XML插入到DOM树中。
标签：jquery 表示 null var 完整 element java his 位置
原文地址：http://www.cnblogs.com/btgyoyo/p/6214310.html
