How to create a document fragment objects

使用 document.createDocumentFragment()

var docfrag = document.createDocumentFragment();

[1, 2, 3, 4].forEach(function (e) {
  var li = document.createElement('li');
  li.textContent = e;
  docfrag.appendChild(li);
});

var element  = document.getElementById('ul');
element.appendChild(docfrag);

 

note: 

1. The document fragments and the DOM node, prior to insertion of DOM, its operations are operations js object does not exist;

2. Use a document fragment node will build more complex structures dom disposable good and then inserted into the DOM tree, helps to reduce the number of re-rendering, to improve the performance of the page;