Summary of js element content operations_javascript skills

1.innerHTML
Everyone must be familiar with this. It is readable and writable. It is very fast and convenient to modify the element content. For compatibility issues, you can refer to a knowledge record in W3Help.

2.outerHTML
This method can be used to quickly replace the element itself, such as:

Copy code The code is as follows:

Hello, I am a demo

$('hello').outerHTML = '';

Unfortunately, firefox does not support it yet (I currently use firefox8), other browsers support it pretty well, and it can be used in ff Use innerHTML to simulate the implementation.

3.documentFragment
DocumentFragment can realize efficient DOM node insertion operation. We can create a new DocumentFragment.

var docFragment = document.createDocumentFragment();

It supports the appendChild method of element nodes, which can be used to append nodes, which is equivalent to a temporary space in the memory, and then added to the DOM at once In Tree, there are few browser-related reflow and repaint events, which were mentioned in the previous blog post.

4.insertAdjacentHTML
This method is very interesting. It was first introduced by IE4 and is currently included in the HTML5 standard. Currently, all browsers support it, and ff has just started to support it in 8. It can flexibly add content in 4 places inside and outside the element, for example:

Copy code Code As follows:

hello, I am a demo.< !-- beforeend-->

$('test').insertAdjacentHTML('beforebegin', /* your content here */);

This is really cool, isn't it? But unfortunately, it was introduced by IE itself, and there are indeed many bugs in IE6~8 versions. For example, in my test, if the element is a div, it can be Content can be inserted smoothly in all four places, which is what we expected. However, if I change it to a p element, 'beforebegin' and 'afterend' will report errors. It only supports the insertion of content outside p and does not allow insertion. Inside p, there are various bugs such as tr and td not supporting this method. Tested with IE9, it performs as expected. The father of jQuery has a blog about this method. If you are interested, you can refer to http://ejohn.org/blog/dom-insertadjacenthtml/

5.textContent
This is for elements The operation of the text content in the element itself and its sub-elements. This is not used very frequently, but you still need to know it. For example:

Copy code The code is as follows:

whatever, blah blah.

hello , I am a Demo

$('test').textContent //whatever, blah blah.hello, I am a Demo

Connect text directly. IE9 and other browsers support this method well.

6.innerText
This was also originally introduced by IE. In addition to Firefox, other browsers currently support it, but the results are slightly different. In Opera, the result is consistent with textContent. In Chrome, it is related to the style containing the text element. In IE9, it's related to the style containing the text element. In fact, innerText and textContent seem similar, but there are some notable differences. There are specific instructions on MDN:

1. textContent can obtain the text in script and style elements. innerText does not work

2. The result of innerText is related to the style, and the text content of hidden elements cannot be obtained, but textContent is not restricted

3. innerText will trigger the reflow event inside the browser, but textContent cannot Yes, this will have some impact on efficiency.

Of course, for IE6~8, we can easily achieve the effect of textContent by traversing nodes. As the solution given in the rhinoceros book:

Copy the code The 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('');
}
}