Home > Developer > JavaScript
Recently, it was found that all major libraries can use div. innerHTML = HTML fragments to generate node elements, and then insert them into each position of the target element. This is actually insertAdjacentHTML, but the nasty innerHTML of IE turns this advantage into a disadvantage. First, innerHTML will remove the spaces in some locations. For details, see the result of the following running box:
<! Doctype html>
<Html dir = "ltr" lang = "zh-CN">
<Head>
<Meta charset = "UTF-8"/>
<Title>
IE's innerHTML By SITU zhengmei
</Title>
<Script type = "text/javascript">
Window. onload = function (){
Var div = document. createElement ("div ");
Div. innerHTML = "<td> <B> situ </B> zhengmei </td>"
Alert ("|" + div. innerHTML + "| ");
Var c = div. childNodes;
Alert ("Number of generated nodes" + c. length );
For (var I = 0, n = c. length; I <n; I ++ ){
Alert (c [I]. nodeType );
If (c [I]. nodeType = 1 ){
Alert (":" + c [I]. childNodes. length );
}
}
}
</Script>
</Head>
<Body>
<P id = "p">
</P>
</Body>
</Html>
Run code
Another bad thing is that the innerHTML of the following elements in IE is read-only: col, colgroup, frameset, html, head, style, table, tbody, tfoot, thead, title, and tr. To clean them up, Ext specially made an insertIntoTable. InsertIntoTable is added using DOM's insertBefore and appendChild, basically the same as jQuery. However, jQuery relies entirely on these two methods. Ext also uses insertAdjacentHTML. To improve efficiency, all class libraries use document fragments in the same way. The basic process is to extract the node through div. innerHTML, transfer it to the file fragment, and then insert the node with insertBefore and appendChild. For Firefox, Ext also uses createContextualFragment to parse the text and insert it directly to its target location. Obviously, Ext is much faster than jQuery. However, jQuery inserts not only HTML fragments, but also various nodes and jQuery objects. Let's review jQuery's workflow.
Show sourceview sourceprint? Append: function (){
// Input the arguments object. true indicates that special processing is required for the table. The callback function
Return this. domManip (arguments, true, function (elem ){
If (this. nodeType = 1)
This. appendChild (elem );
});
},
DomManip: function (args, table, callback ){
If (this [0]) {// if an element node exists
Var fragment = (this [0]. ownerDocument | this [0]). createDocumentFragment (),
// Note that three parameters are input.
Scripts = jQuery. clean (args, (this [0]. ownerDocument | this [0]), fragment ),
First = fragment. firstChild;
If (first)
For (var I = 0, l = this. length; I <l; I ++)
Callback. call (root (this [I], first), this. length> 1 | I> 0?
Fragment. cloneNode (true): fragment );
If (scripts)
JQuery. each (scripts, evalScript );
}
Return this;
Function root (elem, cur ){
Return table & jQuery. nodeName (elem, "table") & jQuery. nodeName (cur, "tr ")?
(Elem. getElementsByTagName ("tbody") [0] |
Elem. appendChild (elem. ownerDocument. createElement ("tbody "))):
Elem;
}
}
// Elems is an arguments object, context is a document object, and fragment is empty.
Clean: function (elems, context, fragment ){
Context = context | document;
//! Context. createElement fails in IE with an error but returns typeof object
If (typeof context. createElement = "undefined ")
// Ensure that context is the Document Object
Context = context. ownerDocument | context [0] & context [0]. ownerDocument | document;
// If a single string is passed in and its a single tag
// Just do a createElement and skip the rest
// If there is only one tag in the document object, such as <div>
// We probably call it out like this $ (this). append ("<div> ")
// At this time, the element name in it will be taken out directly, and it will be returned after being created using document. createElement ("div") and put into the array.
If (! Fragment & elems. length ===1 & typeof elems [0] === "string "){
Var match =/^ <(w +) s */?> $/. Exec (elems [0]);
If (match)
Return [context. createElement (match [1])];
}
// Use innerHTML of a div to create a public Node
Var ret = [], scripts = [], div = context. createElement ("div ");
// Add $ (this) if we are outside ). append ("<td> Table 1 </td>", "<td> Table 1 </td>", "<td> Table 1 </td> ")
// JQuery. each traverses the aguments object, callback. call (value, I, value) according to its fourth branch method (No parameter, length exists)
JQuery. each (elems, function (I, elem) {// I is the index, and elem is the element in the arguments object
If (typeof elem = "number ")
Elem + =;
If (! Elem)
Return;
// Convert html string into DOM nodes
If (typeof elem = "string "){
// Fix "XHTML"-style tags in all browsers
Elem = elem. repl
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
