jquery Core Buildfragment

Core Buildfragment

Dom native interfaces are simple and unitary, parameter types are determined, and not overloaded, and only one element is processed at a time. In the view of jquery completely opposite parameters are complex and diverse, interface overload is severe. If you pass more than one node element at a time, you must introduce document fragmentation in order to optimize processing. We know that using document fragmentation is nothing more than creating first: Fragment = Context.createdocumentfragment () and then put all the DOM nodes that need to be processed into AppendChild: Buildfragment for document fragmentation creation , you can see that the 2 parts have been cut: First look at the first part of the code to collect node elements:

1. var $newdiv 1 = $ (' <div id= "Object1"/> '),
2. Newdiv2 = document.createelement (' div '),
3. Existingdiv1 = document.getElementById (' foo ');
4. $ (' body '). Append ($newdiv 1, [Newdiv2, Existingdiv1, ' <td> resource net </td> ', ' text ', ' <script>alert (1) '])

This code contains six different types of parameters, basically covering all the buildfragment processing is actually very simple, we only need to decompose the different types of parameters, the indentation into the document fragment, of course, because the type of different ways of processing.
For example, a few common problems: IE on the string for trimleft operations, the rest is user input processing, many tags can not be separate as the child elements of Div, TD, Th, TR, TFOOT, tbody, etc., need to add and tail: <td> Resource Network </td > jquery is transformed by Wrapmap, otherwise some will be interpreted as plain text: "<table><tbody><tr><td> the &LT;/TD&GT;&LT;/TR Resource Network ></tbody></table> "
We refer to the code on the right, the whole process is as follows: Decomposition type, jquery object, node object, text, string, script introduced nodes collection of various types of decomposition data for HTML nodes, compatible with IE processing, first filter the blank, and then fill the tr,td and so on to create document fragments div include node , the HTML structure is given to innerHTML to take out the created node, Jquery.merge (nodes, Tmp.childnodes), because the DIV has been wrapped