当前位置: 首页 > 图文教程 > 网络编程 > Javascript > innerHTML和innerText的用法

Javascript
javascript中的有名函数和无名函数
javascript[js]获取url参数的代码
javascript select 之间传值效果的代码
js正则实现的密码框简单制作,还可以替换成自己想用得符号
脚本控制自适应高度的缩短问题
兼容ie和firefox版本的js反选 全选 多选框
javascript 随机数 与高级应用 附vbscript(asp) 随机数总结
不用确认即可打印的javascript代码
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
用javascript实现div可编辑的常见方法
用JavaScript实现的一个IP地址输入框
用javascript取得传递参数的个数的代码
当鼠标移出灰色区域时候,菜单项怎么隐藏起来
才发现的超链接js导致网页中GIF动画停止的解决方法
javascript window.onerror事件学习新收获
javascript 如何生成不重复的随机数
超个性的导航效果
不能再简单的无闪刷新验证码原理很简单
经常用到的javascript验证函数收集
用js实现手把手教你月入万刀(转贴)

Javascript 中的 innerHTML和innerText的用法


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

用法:
<div id="test">
<span style="color:red">test1</span> test2
</div>


在JS中可以使用:

test.innerHTML:

  也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
  上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText:

  从起始位置到终止位置的内容, 但它去除Html标签
  上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML:

  除了包含innerHTML的全部内容外, 还包含对象标签本身。
  上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

完整示例:
<div id="test">
<span style="color:red">test1</span> test2
</div>

<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>


特别说明:

  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>