(Statement: This is the first example of my google, does not mean that you have any opinion on the original author, the original address http://www.cnitblog.com/asfman/articles/32614.html)
This statement is correct, but not rigorous, because it is mainly used when the target node already exists and has some content, such as the body element in the above example, if the target node does not exist or is empty, you can use createElement to create an identical element, and then use appendChild or replaceChild to achieve the same purpose, this does not cause repeated refresh.
Although I usually mix the two, I still have to understand the difference between them:
First:
The elements created by createElement can use innerHTML, while those created by createDocumentFragment can only be used as an attribute to modify the document content as expected. The node types of the two are completely different, and the elements created by createDocumentFragment do not have corresponding tags in the document. Therefore, they can only be accessed in js on the page.
Demo:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html>
<Head>
<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>
</Head>
<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 = 'strong paint power ';
Document. body. appendChild (fragment_2 );
</Script>
</Body>
</Html>
Second, another major difference is that the elements created by createElement can be operated repeatedly. After being added, even if they are removed from the document and still owned by the document, the operation can be continued, but the elements created by createDocumentFragment are one-time, after adding the clips, you cannot perform any operations. (Note: the newly created clips are not added here. As mentioned above, the newly created clips do not have corresponding tags in the document, all child nodes of the clip are added here ).
A comparison example:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html>
<Head>
<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>
</Head>
<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); // an error is reported because fragment does not exist in the document.
SetTimeout (function (){
Outer. removeChild (fragment );
}, 1000)
}, 1000)
}
</Script>
</Body>
</Html>
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
