Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
function f1()
{
document.writeln("<p style='border:1px solid #0000FF'>你好！方法1。</p>");//建立新页面。
}
function f2()
{
var source = document.getElementById("tow");
source.innerHTML = "<p style='border:1px solid #0000FF'>你好！方法2。</p>";//更改当前页，仅限于放置：COL, COLGROUP, DIV,FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR
//source.innerHTML += "<p style='border:1px solid #0000FF'>你好！方法2。</p>";//每单击一次，便会自动从末尾增加一次。
}
function f3()
{
var p = document.createElement("p");//创建一个段落节点
p.setAttribute("style","border:2px solid #0000FF");//添加属性
var text =document.createTextNode("你好！方法3");//创建一个文本节点
p.appendChild(text);//附加文本节点
var source = document.getElementById("tow");
source.insertBefore(p,document.getElementById("oo"));//在目标元素前插入段落节点（source.appendChild(p) 附加段落节点）
}
function f4()
{
// var p = document.getElementById("text");
alert("使用innerHTML："+text.innerHTML +//显示text里的所有元素、文本
"\n使用innerText："+text.innerText +//显示text里的所有文本
"\n使用outerHTML："+text.outerHTML +//显示包含text的所有元素、文本
"\n使用outerText："+text.outerText);
//显示包含text的所有文本，innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而outerText设置包括标签在内的文本。
}
function ih(index)
{
switch(index)
{
case 0:/*Ps:仅有IE支持这四个属性，其他浏览器仅支持innerHTML。*/
text.innerHTML="这是一个<b>粗体</b>的强调的斜体文本。innerHTML。"//替换后，父元素不变。<b>粗体</b>视为粗体元素
break;
case 1:
text.innerText="这是一个<b>粗体</b>的强调的斜体文本。innerText。"//替换后，父元素不变。<b>粗体</b>视为普通文本
break;
case 2:
text.outerHTML="这是一个<b>粗体</b>的强调的斜体文本。outerHTML。"//替换后，覆盖父元素。<b>粗体</b>视为粗体元素
break;
case 3:
text.outerText="这是一个<b>粗体</b>的强调的斜体文本。outerText。"//替换后，覆盖父元素。<b>粗体</b>视为普通文本
break;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tow">
<p style="border: 2px solid #0000FF" id="oo">
试验中……</p>
<input type="button" value="使用document.write()" onclick="f1();" />
<input type="button" value="使用inner.HTML" onclick="f2();" />
<input type="button" value="使用createElement" onclick="f3();" />
<div id="text" style="border:2px solid red;color:blue;"><p>这是一个<b>粗体</b>的<em>强调</em>的<i>斜体</i>文本。</p></div>
<p>
<input type="button" value="获取上面的文本" onclick="f4();" />
<input type="button" value="inertHTML" onclick="ih(0)"/>
<input type="button" value="innerText" onclick="ih(1)"/>
<input type="button" value="outerHTML" onclick="ih(2)"/>
<input type="button" value="outerText" onclick="ih(3)"/>
</p>
</div>
</form>
</body>
</html>
解决方法（引）：
Codefunction isIE(){ //ie?
if (window.navigator.userAgent.toLowerCase().indexOf("msie")>=1)
return true;
else
return false;
}
if(!isIE()){ //firefox innerText define
HTMLElement.prototype.__defineGetter__("innerText",
function(){
var anyString = "";
var childS = this.childNodes;
for(var i=0; i<childS.length; i++) {
Webjx.Com
if(childS[i].nodeType==1)
//anyString += childS[i].tagName=="BR" ? "\n" : childS[i].innerText;
anyString += childS[i].innerText;
else if(childS[i].nodeType==3)
anyString += childS[i].nodeValue;
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__("innerText",
function(sText){
this.textContent=sText;
Webjx.Com
}
);
