How to use createDocumentFragment () method to create nodes in Javascript
This article mainly introduces the Javascript how to use createDocumentFragment () method to create node related knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe you will have something to gain after reading this Javascript article on how to use createDocumentFragment () method to create nodes, let's take a look.
How does Javascript createDocumentFragment () create nodes
Note: the text fragment node is just a collection and does not itself include any HTML elements.
Every time the addition, deletion and movement of DOM nodes cause the browser to re-render the HTML document, if there are too many such operations, it will not only waste resources, but may also cause "splash screen" phenomenon.
In order to reduce the burden on the browser and improve the user experience, it is best to add all the nodes to the DOM (HTML document) at once, and the document fragment node comes in handy. You can first add all the nodes to the document fragment node, and then add the document fragment node to the DOM (HTML document).
For example, add three p > tags to DOM at once:
Div id= "demo" >
Div > Click here to add a new node / div >
/ div >
Script type= "text/javascript" >
Document.getElementById ("demo") .onclick=function () {
Var divFragment=document.createDocumentFragment ()
Div1=document.createElement ("div")
Div2=document.createElement ("div")
Div3=document.createElement ("div")
Div1.appendChild (document.createTextNode ("this is the new node 1"))
Div2.appendChild (document.createTextNode ("this is New Node 2"))
Div3.appendChild (document.createTextNode ("this is the new node 3"))
DivFragment.appendChild (div1)
DivFragment.appendChild (div2)
DivFragment.appendChild (div3)
This.appendChild (divFragment)
}
/ script >
How does Javascript createDocumentFragment () create nodes
Example demonstration:
?
# demo {
Width:250px
Padding:0px 10px 10px 10px
Border:1px solid # ccc
Background-color:#ededed
}
# demo div {
Height:50px
Width:250px
Margin-top:10px
Text-align:center
Line-height:50px
Background-color:#ccc
}
This is the end of the article on "how to create nodes with the createDocumentFragment () method in Javascript". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to create nodes with createDocumentFragment () method in Javascript". If you want to learn more, you are welcome to follow the industry information channel.
