Js-related element content operation summary

1. innerHTML
Everyone must be familiar with this, read and write, and modify the element content quickly and conveniently. For compatibility issues, refer to a knowledge record in W3Help.

2. outerHTML
This method can be used to quickly Replace the element itself, for example:
Copy codeThe Code is as follows:
<P id = "hello"> Hello, I am a demo </p>
$ ('Hello'). outerHTML = '<p> hello, I am a replacement </p> ';

Unfortunately, firefox does not support it currently (I currently use firefox8). other browsers support it well. You can use innerHTML to simulate it in ff.

3. documentFragment
DocumentFragment can implement efficient DOM node insert operations. We can create a new DocumentFragment.

Var docFragment = document. createDocumentFragment ();

It supports the appendChild method of element nodes and can be used to append nodes, which is equivalent to a temporary space in the memory and then added to the DOM Tree at a time. Fewer browser-related reflow and repaint events are involved, as mentioned in previous blog posts.

4. insertAdjacentHTML
This method is very interesting. It was first introduced by IE4 and has also been written into the HTML5 standard. Currently, all browsers support this method, and ff is supported at the beginning of 8. It can flexibly add content in four places inside and outside the element, for example:

Copy codeThe Code is as follows:
<! -- Beforebegin --> <p id = "test"> <! -- Afterbegin --> hello, I am a demo. <! -- Beforeend --> </p> <! -- Afterend -->
$ ('Test'). insertAdjacentHTML ('beforebegin',/* your content here */);

This is indeed cool, isn't it, but unfortunately, it is introduced by IE itself, indeed in IE6 ~ There are many bugs in version 8. For example, if the element is div, the content can be smoothly inserted in four places. This is what we expected, however, if I change to p, an error will be reported for 'beforebegin' and 'afterend', which only supports content insertion outside p and cannot be inserted inside p, As well as tr, td does not support various bugs such as this method. IE9 tested and expected performance. About this method, the father of jQuery, there is a blog, interested can slightly refer to the http://ejohn.org/blog/dom-insertadjacenthtml/

5. textContent
This is an operation on the text content of an element. It extracts the text content from the element itself and its child elements. The frequency of this operation is not very high, but you still need to know it, for example:

Copy codeThe Code is as follows:
<Div id = "test"> <p> whatever, blah. </p> hello, I am a <em> Demo </em> </div>
$ ('Test'). textContent // whatever, blab. hello, I am a Demo

Directly connect the text. IE9 + and other browsers support this method.

6. innerText
This was first introduced by IE, which is supported by other browsers except firefox, but the results are slightly different. In opera, the result is consistent with textContent. In chrome, it is related to the style that contains the text element. In IE9, it is related to the style that contains the text element. In fact, innerText and textContent seem similar, but there are some notable differences. The specific MDN is described as follows:

1. textContent can get the script and text in the style element. InnerText does not work

2. The result of innerText is related to the style. The text content of hidden elements cannot be obtained. textContent is unrestricted.

3. innerText will trigger the reflow event inside the browser, but textContent will not, which has a slight impact on efficiency.

Of course, for IE6 ~ 8. You can easily traverse nodes to achieve textContent. The solution in the rhino book is as follows:

Copy codeThe Code is as follows:
Function textContent (e ){
Var child, type, s = []; // s holds the text of all children
For (child = e. firstChild; child! = Null; child = child. nextSibling ){
Type = child. nodeType;
If (type = 3 | type = 4) {// Text and CDATASection nodes
S. push (child. nodeValue );
} Else if (type = 1 ){
S. push (textContent (child ));
}
Return s. join ('');
}
}