Most of the internet can be found that the use of createdocumentfragment mainly because of avoiding createelement multiple times added to the document.body caused by efficiency problems, such as:
Copy Code code as follows:
var arrtext=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
for (Var i=0;i<arrtext.length;i++) {
var op=document.createelement ("P");
var otext=document.createtextnode (Arrtext[i]);
Op.appendchild (Otext);
Document.body.appendChild (OP);
}
var arrtext=["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var ofrag=document.createdocumentfragment ();
for (Var i=0;i<arrtext.length;i++) {
var op=document.createelement ("P");
var otext=document.createtextnode (Arrtext[i]);
Op.appendchild (Otext);
Ofrag.appendchild (OP);
}
Document.body.appendChild (Ofrag);
(statement: This is my first example of Google, does not mean that the original author has any comments, the original address http://www.cnitblog.com/asfman/articles/32614.html)
This statement is not wrong, but not rigorous, because like this usage, mainly used in the target node is already existing and a part of the case, such as the above example of the BODY element, if the target node does not exist or is empty, you can use createelement to create an identical element, The operation is followed by a appendchild or replacechild to achieve the same purpose, so there is no problem of duplicate refreshes.
Although I usually mix the two, but still have to understand the difference between the two:
First:
Elements created by createelement can use the elements created by innerhtml,createdocumentfragment to use innerHTML and do not achieve the desired effect of modifying the contents of the document, just as a property. The node types of the two are completely different, and the elements created by createdocumentfragment do not have corresponding tags in the document, so they can only be accessed in JS on the page.
Demo
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<style type= "Text/css" >
#outer {height:200px; border:1px solid #006400;}
</style>
<body>
<div id= "outer" >
</div>
<input type= "button" value= "createelement" id= "btn_1"/><input type= "button" value= "Createdocumentfragment" Id= "Btn_2"/>
<script type= "Text/javascript" >
var fragment_1 = document.createdocumentfragment ();
fragment_1.innerhtml = ' <p> I am a painter </p> ';
Document.body.appendChild (fragment_1);
var fragment_2 = document.createelement (' P ');
fragment_2.innerhtml = ' painting ability strong ';
Document.body.appendChild (fragment_2);
</script>
</body>
Second: The other main difference is that the elements created by createelement can be repeated operations, added even if removed from the document is still owned by the document, you can continue to operate, but Createdocumentfragment created elements are one-time, After you add it, you won't be able to manipulate it (note: the addition here is not adding a newly created fragment because it says that the newly created fragment does not have a corresponding label inside the document, where all the child nodes of the fragment are added).
An example of contrast:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<style type= "Text/css" >
#outer {height:200px; border:1px solid #006400;}
</style>
<body>
<div id= "outer" >
</div>
<input type= "button" value= "createelement" id= "btn_1"/><input type= "button" value= "Createdocumentfragment" Id= "Btn_2"/>
<script type= "Text/javascript" >
function $ (ID) {
return document.getElementById (ID);
}
var outer = $ (' outer ');
var inner = $ (' inner ');
$ (' btn_1 '). onclick = function () {
var div = document.createelement (' div ');
div.innerhtml = ' <p> test createelement</p> ';
Document.body.appendChild (DIV);
settimeout (function () {
Outer.appendchild (DIV);
settimeout (function () {
Outer.removechild (DIV);
},1000)
},1000)
}
$ (' btn_2 '). onclick = function () {
var p = document.createelement (' P ');
p.innerhtml = ' Test documentfragment ';
var fragment = Document.createdocumentfragment ();
Fragment.appendchild (P);
fragment.innerhtml = ' <p> test documentfragment</p> ';
fragment.innerhtml = ' <span> test documentfragment</span> ';
Document.body.appendChild (fragment);
settimeout (function () {
Outer.appendchild (fragment)//error, because the document can not exist inside the fragment
settimeout (function () {
Outer.removechild (fragment);
},1000)
},1000)
}
</script>
</body>
