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

Javascript
javascript 面向对象的经典实例代码
javascript prototype原型操作笔记
JavaScript 常见对象类创建代码与优缺点分析
javascript 混合的构造函数和原型方式，动态原型方式
测试JavaScript字符串处理性能的代码
JQuery 表单中textarea字数限制实现代码
jQuery Selectors(选择器)的使用(六、属性篇)
IE浏览器打印的页眉页脚设置解决方法
javascript检测(控制 )上传文件大小
jquery 双色表格实现代码
JavaScript Cookie的读取和写入函数
JavaScript 利用Cookie记录用户登录信息
JavaScript Cookie显示用户上次访问的时间和次数
JavaScript Cookie 直接浏览网站分网址
javascript OFFICE控件测试代码
javascript setTimeout和setInterval 的区别
javascript弹出窗口 window.open使用方法以及参数说明分析篇
可以用来搜索当前页面内容的js代码
动态调整textarea中字体的大小代码
为指定元素增加样式的js代码

No. « 246 247 248 249 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 347 ::
收藏到网摘: 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>