来自：http://www.verydemo.com/demo_c101_i43677.html
转自：http://www.cnblogs.com/huashanlin/archive/2007/04/09/705739.html
简单的说：
innerhtml就是把东东插入此对象的二个HTML代码之间,并清空旧的中间的东东, 如a_id.innerHTML = "dddd";本来的<a>kkkk</a>变成<a>dddd</a>
补充说明：
就是在对象的的二个HTML格式符之间清空原来的内容,再插入新内容,而OUTERHTML是把对象本身包含子对象清空,然后在它这个位置插入新的内容,而INNERTEXT却是插入文本,当包含有如<等HTML格式符的关键字符时,会自动转义,反正你插入的内容全显示,而XHTML即当做一段HTML来解释,HTML格式代码是不会显示的,
下面是一个网上朋友弄的不错的测试,
<html>
<head>
<title>无标题</title>
<head>
<body>
在下面输入你要替换的内容,文本或HTML
<textarea id=mytext > <input type=button value=innerHTML onclick=myreplace(this.value)>
<input type=button value=innerText onclick=myreplace(this.value)>
<input type=button value=outerHTML onclick=myreplace(this.value)>
<input type=button value=outerText onclick=myreplace(this.value)>
<script language ='javascript'>
<!--
function myreplace(how)
{
if(document.getElementById("show") == null)
document.body.insertAdjacentHTML( 'beforeEnd', "<div id=show title=显示区域><input value=显示区域></div>");
switch(how)
{
case "innerHTML":
alert("未使用INNERHTML前的SHOW这个DIV的HTML代码如下:/n" + show.outerHTML);
show.innerHTML = mytext.value;
alert("使用INNERHTML的SHOW这个DIV的HTML代码如下:/n" + show.outerHTML);
break;
case "innerText":
alert("未使用INNERtext前的SHOW这个DIV的HTML代码如下:/n" + show.outerHTML);
show.innerText = mytext.value;
alert("使用INNERtext的SHOW这个DIV的HTML代码如下:/n" + show.outerHTML);
break;
case "outerHTML":
alert("未使用outerhtml前的SHOW这个DIV的HTML代码如下:注意,用这个后,SHOW对象将不存在/n" + document.body.outerHTML);
show.outerHTML = mytext.value;
alert("使用outerHTML的SHOW这个DIV的HTML代码如下:/n" + document.body.outerHTML);
break;
case "outerText":
alert("未使用outertext前的SHOW这个DIV的HTML代码如下:注意,用这个后,SHOW对象将不存在/n" + document.body.outerHTML);
show.outerText = mytext.value
alert("使用outertext的SHOW这个DIV的HTML代码如下:/n" + document.body.outerHTML);
break;
}
}
//-->
</script>
下面为效果显示区域:
</body>
</html>