<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>domManip</title>
</head>
<body>
<div id='foo'>Hello</div>
<button id="test1">jquery.buildFragment生成文檔碎片</button>
<button id="test2">模擬jquery.buildFragment生成文檔碎片</button>
<script type="text/javascript">
var $newdiv1 = $('<div id="object1"/>'),
newdiv2 = document.createElement('div'),
existingdiv1 = document.getElementById('foo');
var rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi;
var wrapMap = {
// Support: IE 9
option: [1, "<select multiple='multiple'>", "</select>"],
thead: [1, "<table>", "</table>"],
col: [2, "<table><colgroup>", "</colgroup></table>"],
tr: [2, "<table><tbody>", "</tbody></table>"],
td: [3, "<table><tbody><tr>", "</tr></tbody></table>"],
_default: [0, "", ""]
};
// Support: IE 9
wrapMap.optgroup = wrapMap.option;
wrapMap.tbody = wrapMap.tfoot = wrapMap.colgroup = wrapMap.caption = wrapMap.thead;
wrapMap.th = wrapMap.td;
function buildFragment(elems, context) {
var elem, tmp, tag, wrap, contains, j,
fragment = context.createDocumentFragment(),
nodes = [],
i = 0,
l = elems.length;
//篩選出不同類型的節點
for (; i < l; i++) {
elem = elems[i];
if (elem || elem === 0) {
if (jQuery.type(elem) === "object") {
// 如果是jQuery對象
// 如果是普通元素對象加[elem]
// 取出ele放入nodes數組中
jQuery.merge(nodes, elem.nodeType ? [elem] : elem);
// 沒有html結構，是一個文本節點
} else if (!/<|&#?\w+;/.test(elem)) {
nodes.push(context.createTextNode(elem));
} else {
//創一個元素div做為容器
tmp = tmp || fragment.appendChild(context.createElement("div"));
tag = (/<([\w:]+)/.exec(elem) || ["", ""])[1].toLowerCase();
//ie對字符串進行trimLeft操作，其余是用戶輸入處理
//很多標簽不能單獨作為DIV的子元素
//td,th,tr,tfoot,tbody等等,需要加頭尾
wrap = wrapMap[tag] || wrapMap._default;
tmp.innerHTML = wrap[1] + elem.replace(rxhtmlTag, "<$1></$2>") + wrap[2];
// Descend through wrappers to the right content
// 因為warp被包裝過
// 需要找到正確的元素父級
j = wrap[0];
while (j--) {
tmp = tmp.lastChild;
}
// Support: QtWebKit
// jQuery.merge because push.apply(_, arraylike) throws
// 把節點拷貝到nodes數組中去
jQuery.merge(nodes, tmp.childNodes);
}
}
}
i = 0;
while ((elem = nodes[i++])) {
fragment.appendChild(elem)
}
return fragment;
}
$('#test1').click(function() {
"<table><tbody><tr><td>慕課網</td></tr></tbody></table>"
$('body').append($newdiv1, [newdiv2, existingdiv1, '<td>慕課網</td>', '文本', '<script>alert(1)'])
})
$('#test2').click(function() {
//6中類型的數據結構
//這里不設計script的執行
var fragment = buildFragment([$newdiv1, newdiv2, existingdiv1, '<td>慕課網</td>', '文本', '<script>alert(1)'], document)
document.body.appendChild(fragment)
})
</script>
</body>
</html>
