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

　

innertext

原文地址为：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;

这样问题就可以得到解决.

转载请注明本文地址：innerText，innerHTML的用法以及注意事项

相关阅读

f_mount怎么个用法?

fatfs 学习笔记--f_mount用法 这个文章后面的评论： 疯小草： 我补充一下吧，其实只有一个设备的时候也并不是f_mount(&fs,"",1)就是对

response.setHeader()的用法

1. HTTP消息头（1）通用信息头即能用于请求消息中,也能用于响应信息中,但与被传输的实体内容没有关系的信息头,如Data,Pragma主要: Ca

strip_tags 的用法

strip_tags (PHP 3>= 3.0.8, PHP 4 , PHP 5)strip_tags--Strip HTML and PHP tags from a string Description string stri

switch ... case语句的用法

当情况大于或等于4种的时候就用switch ...  case语句switch（表达式）{case 常量1： 语句体1；case 常量2： 语句体2；case 常量3： 语句体3；cas

tf.add_n函数的用法

tf.add_n([p1, p2, p3....])函数是实现一个列表的元素的相加。就是输入的对象是一个列表，列表里的元素可以是向量，矩阵，等例如：import