Efficient insertion of child nodes DocumentFragment

DocumentFragment Object

NULL . However, it has a special behavior that makes it very useful to insert a documentfragment node into the document tree instead of the documentfragment itself, but all of its descendant nodes. This makes documentfragment a useful placeholder for temporarily storing nodes that are inserted into a document at once. It also facilitates the cutting, copying, and pasting of documents, especially when used with the Range interface. You can create a new empty DocumentFragment node with the Document.createdocumentfragment () method. You can also use the Range.extractcontents () method or the Range.clonecontents () method to get the DocumentFragment node that contains the fragments of an existing document. 

Usually we insert a document as follows:

var nodes = div.childnodes;  for (var i=0, length=nodes.length; i<length; i+=1) {   //  Container container Load cloned nodes-the role of cloning is to ensure the full container.appendchild of nodes   (Nodes[i].clonenode (true));}

This results in a constant reflow of the browser and has an impact on performance. We can take advantage of the DocumentFragment features:

HTMLElement.prototype.appendHTML = function (html) {    var divtemp = document.createelement ("div"), nodes = null               , fragment = Document.createdocumentfragment ();    divtemp.innerhtml = html;    nodes = Divtemp.childnodes;    For (var i=0, length=nodes.length; i<length; i+=1) {       fragment.appendchild (Nodes[i].clonenode (true));    }    This.appendchild (fragment);        nodes = null;    fragment = null;};

Only once ~ ~ ~.

For a method that uses innerHTML directly, if the inserted element is bound to have a click event, the event is gone when it is inserted again. This case is done with a delegate that uses events. For example:the On method of jquery

insertAdjacentHTML

Insert (insert) adjacent (adjacent) HTML.

The syntax is as follows:

element.insertadjacenthtml (position, HTML);

positionis relative to element the position of the element and can only be one of the following strings:

beforebegin

In element front of the element.

afterbegin

In element 元素的第一个子元素前面。

beforeend

In element 元素的最后一个子元素后面。

afterend

at element the back of the element.

htmlIs that the string is parsed into HTML or XML inserted into the DOM tree.

Efficient insertion of child nodes DocumentFragment