深山工作室

深山工作室 >

js中innerHTML,innerText,outerHTML的用法与区别

用法:

<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>

特别说明:
  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使 用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正 则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

完整示例:

以下为详细代码
前一页:利用css设置div漂浮在底部或顶部
后一页:超级实用且不花哨的js代码大全( 1 )
相关阅读
兼容pc、移动端用js实现复制内容到剪切板(支持苹果safari浏览器)
用javscript实现为表格的每一行自动加上序号
利用JavaScript获取现在时间日期与农历
做在线客服时,聊天窗口的div滚动条始终在底部
innerHTML动态改变ID的CSS样式表
利用javascript做的页内(详细页)搜索功能并将结果高亮突出显示
javascript编写的网页版的打字测试程序
javascript取汉字拼音首字母缩写程序
更多>>页面特效相关信息
jquery下拉到某个固定位置然后某些元素发生改变样式状态
canvas绘制的文字如何换行
兼容pc、移动端用js实现复制内容到剪切板(支持苹果safari浏览器)
js兼容多个浏览器右下角漂浮广告
兼容ie6+和火狐的禁止右键
更多>>最新添加
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法