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

Javascript
[原创]js 日期加红代码 适用于各种cms
[原创]javascript 改变字体大小方法集合
jsTree树控件(基于jQuery, 超强悍)[推荐]
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
jQuery live( type, fn ) 委派事件实现
javascript createElement()创建input不能设置name属性的解决方法
Jquery 表单取值赋值的一些基本操作
jquery select选中的一个小问题
网页里控制图片大小的相关代码
网页常用特效代码整理
网站上面有这种切换效果
tagName的使用,留一笔
图片按比例缩放函数
非常好的js代码
精彩图片推荐 渐隐渐现
左右图片循环滚动停顿一下后继续
popdiv
奇妙的Javascript图片放大镜
怎么用javascript进行拖拽
一个表格收缩展开的函数

Javascript 中的 innerHTML和innerText的使用方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 442 ::
收藏到网摘: 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>