1. 作为HTML的元素内容
innerHTML:
读取Element的innerHTML属性作为字符串标记返回那个元素的内容，在元素上设置该属性调用了Web浏览器的解析器，用新字符串内容的解析展现形式替换元素当前内容。通常设置innerHTML效率非常高，甚至在指定 的值需要解析时效率也相当不错，但注意，对innerHTML属性用‘+=’操作符重复追加一小段文本通常效率低下，因为它既要序列化又要解析
outerHTML:
当查询outerHTML时，返回的HTML或XML标记的字符串包含被查询元素的开头和结尾标签，当设置元素的outHTML时，元素本身被新的内容所替换。只有Element节点定义了outHTML属性。Document节点则无。
PS：低版本的FF不支持outerHTML,扩展方法如下：
扩展outerHTML (function(){
//如果outerHTML存在，则直接返回
if(document.createElement('div').outerHTML) return;
//返回this所引用的外部HTML
function outerHTMLGetter(){
var container = document.createElement('div');
container.appendChild(this.cloneNode(true));
return container.innerHTML;
};
//用指定的值设置元素的外部HTML
function outerHTMLSetter(value){
var container = document.createElement('div');
container.innerHTML = value;
//将虚拟元素中的节点全部移动到文档中，直到没有子节点为止
while(container.firstChild){
this.parentNode.insertBefore(container.firstChild, this);
}
//删除所被取代的节点
this.parentNode.removeChild(this)
}
/*使用这两个函数作为所有Element对象的outerHTML属性的getter和setter，如果它存在则使用es5的Object.definedProperty()方法，否则，使用__definedGetter__()和__defineSetter__()
*/
if (Object.defineProperty){
Object.defineProperty(Element.prototype, 'outerHTML',{
get: outerHTMLGetter,
set: outerHTMLSetter,
enumerable: false,
configurable: true
})
}
else{
Element.prototype.__defineGetter__('outerHTML',outerHTMLGetter);
Element.prototype.__defineSetter__('outerHTML',outerHTMLSetter);
}
}())
insertAdjacentHTML(sWhere,position):
将任意的HTML标记字符串插入到指定的元素“相邻”的位置， sWhere的值是“beforeBegin”，“afterBegin”,”beforeEnd”,”afterEnd”,position是被插入的HTML字符串
注:低版本的FF不支持此方法，扩展方法如下:
扩展insertAdjacentHTML/*本模块为不支持insertAdjacentHTML的浏览器扩展方法，还定义一些可移植的HTML插入函数Insert.before() | after() | atStart() | atEnd*/
var Insert(function(){
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('afterbegin', h);},
atEnd: function(e, h){e.insertAdjacentHTML('beforeEnd', h)}
};
}
//如果没原生的，定义一个工具函数，传入HTML字符串，返回一个DocumentFragment
function fragment (html){
var elt = document.createElement('div');
var frag = document.createDocumentFragment();
elt.innerHTML = html;
while (elt.firstChild){
frag.appendChild(elt.firstChild);
}
return frag;
}
var Insert = {
before: function (elt, html){
elt.parentNode.insertBefore(fragment(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.appendChild(fragment(html));
}
};
Element.prototype.insertAdjacentHTML = function (pos, html){
switch(pos.toLowerCase()){
case 'beforebegin': return Insert.before(this, html);
case 'afterend': return Insert.after(this, html);
case 'afterbegin': return Insert.atStart(this, html);
case 'beforeend': return Insert(this, html);
};
return Insert;
}
}());
2.作为纯文本的元素内容
textContent || innerText
textContent 是标准方法，除了IE8及以下的浏览器都支持,innerText 是IE4引入的，它除了早期的ff外都支持
两者的区别：
innerText是需要对innerHTML的值进行
1）HTML转义（等同于XML转义，对< 、&等转义字符进行处理
2）经过HTML解释和CSS样式解释
3）剔除格式信息 (多个空格合并成一个，换行，制表
经过上述3步后留下的纯文本；innerText不返回<script>元素的内容；同时，它对某些表格元素(table,tbody,tr)是只读属性
textContent只是经过上述的第一步，没有进行2 3步，只将后代的text节点简单的串联在一起
====》来自javascript textContent与innerText的异同分析 ====》
查找元素的后代中节点中的所有的Text节点
返回纯文本function textContent (element,value) {
var content = element.textContent;
if (value === undefined) { //获取
if(content !== undefined ) return content;
else return element.innerText;
}
else{ //设置
if (content !== undefined) element.textContent = value;
else element.innerText = value;
}
}
function textContent1 (e) {
var child, type, s = "";
for(child = e.firstChild; child != null; child = child.nextSibling){
type = child.nodeType;
if (type === 3 || type === 4){
s += child.nodeValue;
}
else if (type ===1 ) {
s += textContent1(child)
}
return s;
}
}
/* nodeValue 属性可以读/写,设置它可以改变Text/CDATASection节点内容所显示的内容；Text/CDATASction都
** 是CharacterData的子类型，CharacterData定义了data属性，它和nodeValue 文本相同，可以应用很多方法
*/
function upcase (n) {
if (n.nodeType == 3 || n.nodeType == 4)
n.data = n.data.toUpperCase()
else {
for ( var i = 0; i < n.childNodes.length; i ++){
upcase (n.childNodes[i];
}
}
=====================================================================
创建节点
createElement() /createTextNode() / createComment() /createDocumentFragment() /createElementNS()
cloneNode(boolean) true 表示深复制，它及其后代元素都会被复制，false 表示只复制它本身，其余元素不会被复制
importNode(element, boolean) 第一个参数是一个文档的节点，第二个参数是一个布尔值，与cloneNode()中的参数一样；返回一个适合本文档插入的节点的副本（IE不支持)
插入节点
appendChild() / insertBefore ()
如果调用appendChild()或insertBefore() 将已存在文档中的一个节点再次插入，那个节点将自动从它当前的位置删除并在新的位置重新插入，没有必要显示删除该节点。
应用：
表单行排序function sortrows (table, n, comparator) { // 如果comparator函数存在，则使用它进行比较
var tbody = table.tBodies[0]; //第一个tbody，可能是隐式创建的
var rows = tbody.getElementsByTagName('tr');
rows = Array.prototype.slice.call(row,0) //生成数组的快照
rows.sort(
function (row1, row2){
var cell1 = row1.getElementsByTagName('td')[n];
var cell2 = row2.getElementsByTagName('td')[n];
var val1 = cell1.textContent || cell1.innerText;
var val2 = cell2.textContent || cell2.innerText;
if (comparator) return comparator( val1, val2);
if (val1 < val2) return -1;
else if (val1 > val2) return 1;
else return 0
});
//在tbody中按它们的顺序把行添加到最后，若tbody中包含除了tr任何其他元素，这些节点自动到顶部
for ( var i = 0; i < rows.length; i ++) tbody.appendChild(rows[i])
}
//查找表格的th元素，让它们可以单击;以便单击列标题，按该列对行排序
function makeSorttable (table) {
var headers = table.getElementsByTagName('th');
for ( var i = 0; i< headers.length; i++){
(function(n){
headers[i].onclick = function(){sortrows(table,n)};
})(i);
}
};
