New additions to the knowledge

innerHTML we are very familiar with, and in the beginner JS time with a lot of, also very convenient, than create DOM elements, and then use appendchild splicing more convenient, but when we have to deal with a larger amount, innerHTML on GG, Have seen some of the improvements that others share on the Internet, here also to organize a share to everyone.

The first of these solutions:

Using the insertAdjacentHTML () method,

This method receives two parameters, one is where, one is text,

Where is the insertion position, with four optional values, respectively:

1. Beforebegin: Inserting before the label starts
2. Afterbegin: After inserting to tag start tag
3. BeforeEnd: Before you insert the tag end tag
4. Afterend: After inserting the tag end tag

Text is an HTML literal, such as "<li></li>";

For an analysis of the four positional parameters, see the code:

Let's take a look at the HTML structure:

<ul id= "List" >      <li>one</li></ul>

1, Beforebegin: Insert before the label begins:

var List=document.getelementbyid ("list"); List.insertadjacenthtml ("Beforebegin", "<li>two</li>");

The view code in the browser is this:

<li>two</li><ul>  <li>one</li></ul>

2, Afterbegin: inserted after the tag start tag

var List=document.getelementbyid ("list"); List.insertadjacenthtml ("Afterbegin", "<li>two</li>");

This is true in the browser:

<ul id= "List" >      <li>two</li>      <li>one</li></ul>

3. BeforeEnd: Before the tag end tag

var List=document.getelementbyid ("list"); List.insertadjacenthtml ("BeforeEnd", "<li>two</li>");

This is true in the browser:

<ul id= "List" >       <li>one</li>       <li>two</li></ul>

4. Afterend: After inserting the tag end tag

var List=document.getelementbyid ("list"); List.insertadjacenthtml ("Afterend", "<li>two</li>");

In the browser:

<ul id= "List" >      <li>one</li></ul><li>two</li>

For the second argument, it can be a string parameter, like this:

var html= "<li>two</li>"; list.insertadjacenthtml ("Afterend", HTML);

This method is already supported by the new versions of the major browsers. Specific version of the support situation can be self-Baidu.

One more homemade method: appendhtml ();

If you understand the AppendChild method, you should be able to guess, the appendhtml method is to append an HTML code after an element, the implementation method is as follows:

Method thought:

1. First create a container, here is the DIV;
2. Then add the HTML code that you want to append to the container;
3. Take out all the nodes in this container and traverse each node;
4. Create a document fragment, Fragment=document.createdocumentfragment ();
5. Copy the node into the document fragment, where deep copy is performed using the CloneNode function;
6. Finally, the document fragment is appended to the element.

function appendhtml (ele,html,site) {

var div=document.createelement ("div"),
Nodes=null,
Fragment=document.createdocumentfragment ();
div.innerhtml=html;
Nodes=div.childnodes;
for (Var i=0,len=nodes.length;i<len;i++) {
Fragment.appendchild (Nodes[i].clonenode (true));
}
site=site| | " Before ";
Site!== "before"? Ele.appendchild (fragment): Ele.insertbefore (fragment, ele.firstchild);
Reclaim Memory
Nodes=null;
Fragment=null;
}

This can be used:

Appendhtml (list,html, "after"); Appendhtml (list,html, "before");

The results are: (or using the HTML code structure above)

After<ul id= "List" >      <li>one</li>       <li>two</li></ul>//before<ul id= "List" >      <li>two</li>       <li>one</li></ul>

Resources:

http://www.zhangxinxu.com/

New additions to the knowledge