The principle is basically this, if the incoming is a string, then let them become an element node, but this element node can also have many layers, in the most inner layer of the elements to be wrapped in. There are several ways to turn a string into an element node.
1,createelement,ie can also be created with element properties, but only one layer is created.
2,innerhtml, but you need to deal with the original string, IE and FF have a lot of unexpected default behavior, you can add something or less.
3,createcontextualfragment, because opera's behavior is a little weird, you need to select the location to modify the elements. By the Japanese test, it converts the string into nodes more efficient than innerHTML, but also more secure, really strong stronger, weak weaker. If you are passing in the element node, you need to clone it, or all of it becomes wrapall. If it is a function, the current element is passed in, and some of its properties are used to create a parcel element.
The original experiment (where the wrapouter corresponds to the wrap of jquery):
Copy Code code as follows:
var parsehtml = function (str) {
if (Document.createrange) {
var range = Document.createrange ()
Range.setstartafter (Document.body)
return Range.createcontextualfragment (str)
}else{
return Document.createelement (str)
}
}
var wrapouter = function (target,html) {
var wrap = parsehtml (HTML);
Target.parentNode.insertBefore (Wrap,target);
Target.previousSibling.appendChild (target)
}
<!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <meta charset= "Utf-8"/> <meta conten t= "ie=8" http-equiv= "x-ua-compatible"/> <style type= "Text/css" > wrapper {margin:5px 5px 5px 5px; padding:5px 5px 5px 5px; Background-color: #dfe8f6; border:1px Solid Magenta; }. inner{Margin:1em; height:20px; Background: #a9ea00} border{border:2px solid red; } </style> <title> Parcel node by Masaki </title> <script type= "Text/javascript" > window.onload = functio N () {var parsehtml = function (str) {if (Document.createrange) {var range = Document.createrange () range.setstartafter ( Document.body) return range.createcontextualfragment (str)}else{return document.createelement (str)}} var Wrapoute R = function (target,html) {var wrap = parsehtml (HTML); Target.parentNode.insertBefore (Wrap,target); Target.previousSibling.appendChild (target)} var a = document.getElementById ("target"); Wrapouter (A, "<div class=' Border ' ></div> ')} </script> </pead> <body id= "ID10" > <div class= "container" > < Div class= "inner" id= "target" > Target node </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Discover that there are some problems in Opera, Range.setstartafter (document.body) to change to our target element. Furthermore, the way to insert the parcel element from InsertBefore to replacechild to improve efficiency.
Copy Code code as follows:
var wrapouter = function (target,html) {
var wrap = html
if (Object.prototype.toString.call (html) = = "[Object String]") {
if (Document.createrange) {
var range=document.createrange ();
Range.selectnodecontents (target);
Wrap = range.createcontextualfragment (html). FirstChild;
}else {
Wrap = document.createelement (str);
}
}
Target.parentNode.replaceChild (Wrap,target);
Wrap.appendchild (target)
}
<!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <meta charset= "utf-8"/> <meta content = "Ie=8" http-equiv= "x-ua-compatible"/> <style type= "Text/css" > wrapper {margin:5px 5px 5px 5px; padding:5px 5px 5px 5px; Background-color: #dfe8f6; border:1px Solid Magenta; }. inner{Margin:1em; height:20px; Background: #a9ea00} border{border:2px solid red; } </style> <title> Parcel node by Masaki </title> <script type= "Text/javascript" > window.onload = functio N () {var wrapouter = function (target,html) {var wrap = html if (Object.prototype.toString.call (html) = = "[Object String ] {if (document.createrange) {var range=document.createrange (); Range.selectnodecontents (target); Wrap = range.createcontextualfragment (html). FirstChild; }else {wrap = document.createelement (str); } target.parentNode.replaceChild (Wrap,target); Wrap.appendchild (target)} var a = document.getElementById ("target"); Wrapouter (A, "≪div class= ' border ' ></div>]} </script> </pead> <body id= ' id10 ' > <div class= ' contain Er "> <div class=" inner "id=" target "> Destination node </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Copy Code code as follows:
Adds a parent element (a parcel element) to each matching element.
Wrap:function (HTML) {//html can be an element node, or it can be an HTML fragment
var _wrap = function (target,html) {
var wrap;
if (Is (HTML, "String")) {
if (Document.createrange) {
var range=document.createrange ();
Range.selectnodecontents (target);
Wrap = range.createcontextualfragment (html). FirstChild;
}else {
Wrap = document.createelement (HTML);
}
}else if (html.nodetype) {
Wrap = Html.clonenode (True)
}
Target.parentNode.replaceChild (Wrap,target);
Wrap.appendchild (target)
}
if (Is (HTML, "Function")) {
Return This.each (function (el,index) {
_wrap (el, Html.call (El,index));
});
}
Return This.each (function (EL) {
_wrap (el,html)
});
},
Abstract the method of creating a PACKAGE element:
Copy Code code as follows:
var _parsehtml = function (el,html) {
var wrap = html;
if (Doc.createrange) {
var range=doc.createrange ();
Range.selectnodecontents (EL);
var wrap = range.createcontextualfragment (html). FirstChild;
Range.detach ();
return wrap;
}else {
return dom.parsehtml (HTML);
}
}
Adds a parent element (a parcel element) to each matching element.
Wrap:function (HTML) {//html can be an element node, or it can be an HTML fragment
var _wrap = function (target,html) {
var wrap = html;
if (!wrap.nodetype) {
Wrap = dom._parsehtml (target,html);
}else{
Wrap = Html.clonenode (True)
}
Target.parentNode.replaceChild (Wrap,target);
Wrap.insertbefore (Target,null)
}
if (Is (HTML, "Function")) {
Return This.each (function (el,index) {
_wrap (el, Html.call (El,index));
});
}
Return This.each (function (EL) {
_wrap (el,html)
});
},
Wrapinner:function (HTML) {
var _wrap = function (target,html) {
var wrap = html;
if (!wrap.nodetype) {
Wrap = dom._parsehtml (target,html);
}else{
Wrap = Html.clonenode (True)
}
Target.insertbefore (Wrap,target.firstchild);
for (Var i=1,n=target.childnodes.length;i<n;i++) {
Wrap.appendchild (Target.childnodes[i],null)
}
}
if (Is (HTML, "Function")) {
Return This.each (function (el,index) {
_wrap (el, Html.call (El,index));
});
}
Return This.each (function (EL) {
_wrap (el,html)
});
},
Wrap all matching elements with a label
Practice: Add a parent element (package) to the first matching element, and then transfer the other matching elements to this parent element
Wrapall (HTML) wrapall (Elem)
Wrapall:function (HTML) {
var wrap = html;
if (!wrap.nodetype)
Wrap = dom._parsehtml (this[0],html);
This[0].parentnode.replacechild (Wrap,this[0]);
Return This.each (function (EL) {
Wrap.insertbefore (El,null);
});
},
To jquery websiteLook, the method of discovering its parcel node has been upgraded, it can be wrapped many layers at a time, and I can only pack one layer at a time. So I decided to call my original Parsehtml method, see here。
Copy Code code as follows:
var wrap = function (HTML) {//html can be an element node, or it can be an HTML fragment
var _wrap = function (target,html) {
var wrap = html;
if (!wrap.nodetype) {
if (Doc.createrange) {
var range=doc.createrange ();
Range.selectnodecontents (target);
Wrap = range.createcontextualfragment (html). FirstChild;
}else{
Wrap = dom.parsehtml (html,null,true). FirstChild
}
}else{
Wrap = Html.clonenode (True)
}
Target.parentNode.replaceChild (Wrap,target);
while (wrap.firstchild && wrap.firstChild.nodeType = 1) {
Wrap = Wrap.firstchild;
}
Wrap.insertbefore (Target,null)
}
if (Is (HTML, "Function")) {
Return This.each (function (el,index) {
_wrap (el, Html.call (El,index));
});
}
Return This.each (function (EL) {
_wrap (el,html)
});
}
Wrap the child nodes of each matching element in something.
var wrapinner = function (HTML) {
var _wrap = function (target,html) {
var wrap = html;
if (!wrap.nodetype) {
Wrap = dom.parsehtml (html,null,true). FirstChild
}else{
Wrap = Html.clonenode (True)
}
Target.insertbefore (Wrap,target.firstchild);
while (wrap.firstchild && wrap.firstChild.nodeType = 1) {
Wrap = Wrap.firstchild;
}
for (Var i=1,n=target.childnodes.length;i<n;i++) {
Wrap.appendchild (Target.childnodes[i],null)
}
}
if (Is (HTML, "Function")) {
Return This.each (function (el,index) {
_wrap (el, Html.call (El,index));
});
}
Return This.each (function (EL) {
_wrap (el,html)
});
}
Wrap all matching elements with a label
Practice: Add a parent element (package) to the first matching element, and then transfer the other matching elements to this parent element
Wrapall (HTML) wrapall (Elem)
var wrapall = function (HTML) {
var wrap = html;
if (!wrap.nodetype) {
if (Doc.createrange) {
var range = Doc.createrange ();
Range.selectnodecontents (This[0]);
Wrap = range.createcontextualfragment (html). FirstChild;
}else{
Wrap = dom.parsehtml (html,null,true). FirstChild
}
} else{
Wrap = Html.clonenode (True)
}
This[0].parentnode.replacechild (Wrap,this[0]);
while (wrap.firstchild && wrap.firstChild.nodeType = 1) {
Wrap = Wrap.firstchild;
}
Return This.each (function (EL) {
Wrap.insertbefore (El,null);
});
}
Found that there are a lot of duplicate code, and then abstract, the external people, thoroughly unintelligible, presumably jquery is such a step to get obscure.
Copy Code code as follows:
Dom.mixin (DOM[FN], (function () {
var wraphelper = function (target,html) {
var wrap = html;
if (!wrap.nodetype) {
if (Document.createrange) {
var range=dom.doc.createrange ();
Range.selectnodecontents (target);
Wrap = range.createcontextualfragment (html). FirstChild;
} else{
Wrap = dom.parsehtml (html,null,true). FirstChild
}
}else{
Wrap = Html.clonenode (True)
}
var insertor = wrap;
while (insertor.firstchild && insertor.firstChild.nodeType = 1) {
Insertor = Insertor.firstchild;
}
return [Wrap,insertor]
}
Wrap all matching elements with a label
Practice: Add a parent element (package) to the first matching element, and then transfer the other matching elements to this parent element
Wrapall (HTML) wrapall (Elem)
var wrapall = function (HTML) {
if (dom.isfunction (HTML)) {
Return This.each (function (el,index) {
Dom (this). Wrapall (The Html.call (this, index));
});
}
var arr = wraphelper (this[0],html);
var wrap = Arr[0],insertor =arr[1];
This[0].parentnode.replacechild (Wrap,this[0]);
Return This.each (function (EL) {
Insertor.insertbefore (El,null);
});
}
Adds a parent element (a parcel element) to each matching element.
var wrap= function (HTML) {
Return This.each (function () {
Dom (this). Wrapall (HTML);
});
}
Wrap the child nodes of each matching element in something.
var wrapinner = function (HTML) {
var _wrap = function (target,html) {
var arr = wraphelper (target,html);
var wrap = Arr[0],insertor =arr[1];
Target.insertbefore (Wrap,target.firstchild);
for (Var i=1,n=target.childnodes.length;i<n;i++) {
Insertor.appendchild (Target.childnodes[i],null)
}
}
if (Is (HTML, "Function")) {
Return This.each (function (el,index) {
_wrap (el, Html.call (El,index));
});
}
Return This.each (function (EL) {
_wrap (el,html)
});
}
return {
Wrapall:wrapall,
Wrap:wrap,
Wrapinner:wrapinner
}
})());
Unwrap the way to say it later!
