当前位置: 首页 > 图文教程 > 网络编程 > Javascript > innerText innerHTML的用法以及注意事项 [推荐]

Javascript
IE与firefox下Dhtml的一些区别小结
jQuery Selectors(选择器)的使用(一、基本篇)
jQuery Selectors(选择器)的使用(二、层次篇)
jQuery 跨域访问问题解决方法
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
javascript 面向对象全新理练之数据的封装
javascript 面向对象全新理练之继承与多态
javascript 面向对象全新理练之原型继承
JavaScript 生成随机数并自动大小排序
JavaScript利用split函数按规定截取字符串(获取邮箱用户名)
JavaScript 双级下拉菜单实现代码
JavaScript split()使用方法与示例
33种Javascript 表格排序控件收集
js 屏蔽鼠标右键脚本附破解方法
javascript json 新手入门文档
jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
javascript 汉字转拼音实现代码
javascript 跳转代码集合
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)

Javascript 中的 innerText innerHTML的用法以及注意事项 [推荐]


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 243 ::
收藏到网摘: n/a

我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是:innerText,outerText,innerHTML,outerHTML,千万要注意它们的大小写,因为错一点您就得不到预期的效果了。 一:动态改变文本和Html
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

innerText属性用来定义对象所要输出的文本,在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”(语句DT.innerText="我很好!")。而对对象DH的改变用了innerHTML属性,它除了有innerText的作用外,还可改变对象DH内部的HTML语句,于是它把文本变成了“我姓肖!”,而且文本输出改成了斜体(<i></i>)并下加一条直线(<u></u>),即语句DH.innerHTML="<i><u>我姓肖!</u></i>"。outerText和outerHTML也具有类似的作用,读者不妨自己试试看。
二:文本的动态输入与输出
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

此例的效果是先在文本框中输入文本,然后按“输出文本”的按钮,接着网页便会自动输出您所输入的文本
三:注意innerHTML有自动检查语法的功能,它会把不完整的HTML代码补充完整,这点可以说是神奇,例如下面的这段脚本
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

运行的效果竟然是这样的:
<TABLE><TBODY><TR></TR></TBODY></TABLE>
如图:

所以请各位在使用时一定要小心.
例如在做这样的操作时就会出错.
复制代码 代码如下:

list.innerHTML="<table><tr>";
list.innerHTML+="<td>"

必须用一个中间变量
Html代码
复制代码 代码如下:

var html="<table><tr>";
html+="<td>";
list.innerHTML=html;
var html="<table><tr>";
html+="<td>";
list.innerHTML=html;

这样问题就可以得到解决.
另外:
innerText在火狐下是不支持的,在网上有这种有人这么做
innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用 innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>