用法:
<divid="test">
<spanstyle="color:red">test1</span>test2
</div>
在JS中可以使用:
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<spanstyle="color:red">test1</span>test2 ”。
test.innerText:
从起始位置到终止位置的内容,但它去除Html标签
上例中的text.innerTest的值也就是“test1test2”,其中span标签去除了。
test.outerHTML:
除了包含innerHTML的全部内容外,还包含对象标签本身。
上例中的text.outerHTML的值也就是<divid="test"><spanstyle="color:red">test1</span>test2</div>
完整示例:
<divid="test">
<spanstyle="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>
分享到:
相关推荐
js中innerHTML与innerText的用法与区别
在javascript中如果我们要获取对象内容,js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里,可能很多人不知道吧,接下来跟着小编一起来学习innerHTML,innerText,...
innerHTML、outerHTML、innerText、outerText的用法与区别.doc
主要介绍了javascript中innerText和innerHTML属性用法,实例分析了javascript中innerText和innerHTML属性的作用和相关的使用技巧,需要的朋友可以参考下
内文基于innerHTML的跨浏览器innerText函数,带有替换项。 innerText是一个功能,不是标准化的,但支持Chrome和IE。 Firefox没有。 有多种方法可以实现innerText功能。 您可以获取一个选择window.getSelection() ,...
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]innerText属性用来定义对象所要输出的文本,在本例中innerText把对象DT中的文本“您好吗?”变成了“我很好!”(语句DT.innerText=”我很好!”)。而对对象DH的改变用...
如果您需要 polyfill,请使用: 用法innerText 所做的就是从element获取el.innerText ,即使浏览器不支持它。 你不能用这个模块设置innerText 。 var innerText = require ( 'inner-text-shim' ) ;var el = ...
innerText(IE)、textContent(FF)、innerHTML 26 outerText、outerHTML(少用) 26 value属性获取表单节点内容 26 (3) 访问节点的样式 27 使用节点对象的style属性对象改变样式 27 使用className设置...
完成 零依赖 JavaScript 自动完成库。... raw : false , // whether to use innerHTML or innerText to set autocomplete options, default is false (innerText) // ^^^^^ DO NOT SET THIS TO TRUE IF YOU PR
第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................
XML创建了标识,而DOM的作用就是告诉script如何在浏览器窗口中操作和显示这些标识 上面我们已经简要的讲述了一些XML的基本原理,我们来看看它们之间的关联以及它们是如何工作的,先看这里一张图: 1.XML描述...