Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.