innerText，innerHTML的用法以及注意事项

     我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。
一:动态改变文本和Html
<html> 
<head> 
<title>DHtml举例12</title> 
<style><!-- 
body {font-family:"宋体";color="blue";font-size="9pt"} 
--> 
</style> 
<script language="JavaScript"> 
function changeText() 
{ 
DT.innerText="我很好!"; 
}//function 

function changeHtml() 
{ 
DH.innerHTML="<i><u>我姓肖!</u></i>"; 
}//function 

function back() 
{ 
DT.innerText="您好吗?"; 
DH.innerHTML="您姓什么?"; 
} 
</script> 
</head> 

<body> 
<p><font color="gray">请点击下边的文字……</font> 
<ul> 
<li id="DT" onclick="changeText()">您好吗? </li> 
<li id="DH" onclick="changeHtml()">您姓什么? </li> 
<li onclick="back()">恢复原样! </li> 
</ul> 
</body> 
</html> 
innerText属性用来定义对象所要输出的文本，在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”（语句DT.innerText="我很好!"）。而对对象DH的改变用了innerHTML属性，它除了有innerText的作用外，还可改变对象DH内部的HTML语句，于是它把文本变成了“我姓肖!”，而且文本输出改成了斜体（<i></i>）并下加一条直线（<u></u>），即语句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有类似的作用，读者不妨自己试试看。
二:文本的动态输入与输出
<html> 
<head> 
<title>DHtml举例13</title> 
<style><!-- 
body {font-family:"宋体";color="blue";font-size:"9pt"} 
.blue {color:blue;font-size:9pt} 
--> 
</style> 
<script language="JavaScript"> 
function OutputText() 
{ 
if(frm.txt.text!="") 
{ Output.innerHTML="在此处输出文本：<u>"+frm.txt.value+"</u>";} //Output为一对象。 
else 
{ Output.innerText="在此处输出文本：";} 
}//function 

</script> 
</head> 

<body> 
<p><br></p> 

<form name="frm"> 
<p><font color="gray">请在文本框中输入文字:</font> 
<input type="text" name="txt" size="50"><br> 
<input type="button" value="输出文本" name="B1" class="blue" onclick="OutputText()"></p> 
</form> 

<p id="Output">在此处输出文本：</p> 
</body> 
</html> 

此例的效果是先在文本框中输入文本，然后按“输出文本”的按钮，接着网页便会自动输出您所输入的文本
三:注意innerHTML有自动检查语法的功能,它会把不完整的HTML代码补充完整,这点可以说是神奇,例如下面的这段脚本
function Get()
{
   document.getElementById("tab").innerHTML="<table><tr>";
   alert(document.getElementById("tab").innerHTML);
}
运行的效果竟然是这样的:
<TABLE><TBODY><TR></TR></TBODY></TABLE>
所以请各位在使用时一定要小心.
例如在做这样的操作时就会出错.
list.innerHTML="<table><tr>";

list.innerHTML+="<td>"


必须用一个中间变量
var html="<table><tr>";

html+="<td>";



list.innerHTML=html;

这样问题就可以得到解决.
Tag标签: HTML,JavaScript
posted @ 2008-04-26 00:59 leening 阅读(286) 评论(3)  编辑 收藏

  回复  引用  查看    
#1楼 2008-04-26 16:43 | 簡簡單單..      
-_-!!! outerText? outerHTML?
  回复  引用  查看    
#2楼 [楼主]2008-04-26 21:00 | leening      
--引用--------------------------------------------------
簡簡單單..: -_-!!! outerText? outerHTML?
--------------------------------------------------------
用法是一样的


  回复  引用  查看    
#3楼 2008-05-08 20:48 | 悍马奔野      
强啊。。。学习啦。最近忙什么啊。。。

标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
 
最新IT新闻:
· 第一财经周刊:当前互联网世界正处无秩序时代
· Visual Studio 2008 SDK 1.1 发布
· 死敌VMware变身微软认证计划新成员
· 英特尔雅虎开发网络计算机频道
· Windows Live视频邮件9月9日开始测试
博客园新闻频道  博客园首页  社区