Implementing insertAdjacentHTML with InsertBefore ()

• The element.insertadjacenthtml () method is introduced by IE and is standardized in HTML5, which inserts arbitrary HTML tag strings into the location of the specified element "adjacent".

insertAdjacentHTML () has two parameters, the first parameter is the Position property, and the second parameter is the token string to be inserted. And the first parameter is a string with one of the following values: "Beforebegin", "Afterbegin", "BeforeEnd", "Afterend", the values at which the insertion point is:

　　(beforebegin) <div id= "target" > (afterbegin) This is the element content (beforeend) </div> (afterend)

• The method appendchild () or insertbefore ()that inserts nodes for node.

1. The AppendChild () method is called on the element node that needs to be inserted, and it inserts the specified node using it as the last node of that node.
2. The InsertBefore () method is called on the parent node of the new node and accepts two parameters. The first parameter is the node to be inserted, the second parameter is the node that already exists, and the new node is inserted in front of the node. If the second argument is NULL, its behavior is the same as appendchild ().

• DocumentFragment is a special node that acts as a temporary container for other nodes.　

　　Note that the parentnode of documentframent is always null. If you pass a documentfragment to AppendChild (), InsertBefore (), ReplaceChild (), you are actually inserting all the child nodes of the document fragment into the document, not the fragment itself.

To make the insertAdjacentHTML () method compatible with all browsers and define a more logical set of names, use InsertBefore () to implement Insert.before (), Insert.after (), Insert.atafter (), Insert.atend () method. The code is as follows:

varInsert= (function(){    //if the element has a native insertadjacenthtml,    //used directly in the HTML Insert function with 4 function names    if(Document.createelement ("div"). insertadjacenthtml) {return{before:function(E,H) {e.insertadjacenthtml ("Beforebegin", h);}, after:function(E,H) {e.insertadjacenthtml ("Afterend", h);}, Atstart:function(E,H) {e.insertadjacenthtml ("Beforebegin", h);}, AtEnd:function(E,H) {e.insertadjacenthtml ("Afterend", h);}    }; }    //Browse does not support insertAdjacentHTML is implemented by Insertbefor    functionfragment (HTML) {varElt=document.createelement ("div");//Create an empty document        varFrag=document.createdocumentfragment ();//Create an empty document fragmentelt.innerhtml=html;//Set document content         while(Elt.firstchild)//move all the nodesFrag.appendchild (Elt.firstchild); returnFrag; }        varinsert={before:function(elt,html) {Elt.parentNode.insertBefore (frament (HTML), ELT); }, after:function(elt,html) {Elt.parentNode.insertBefore (fragment (HTML), elt.nextsibling); }, Atstart:function(elt,html) {Elt.insertbefore (fragment (HTML), elt.firstchild); }, AtEnd:function(elt,html) {Elt.insertbefore (fragment (HTML)); //InsertBefore The second parameter is NULL, its behavior is similar to appendhtml (), which inserts the node into the last. }} Element.prototype.insertAdjacentHTML=function(pos,html) {Switch(Pos.tolowercase ()) { Case"Beforebegin":returnInsert.before ( This, HTML);  Case"Afterend":returnInsert.after ( This, HTML);  Case"Afterbegin":returnInsert.atstart ( This, HTML);  Case"BeforeEnd":returnInsert.atend ( This, HTML); }    }    returnInsert;} ());

From the JavaScript authoritative guide 15.6

Implementing insertAdjacentHTML with InsertBefore ()