1. 在javascript中,首先我们来看innerHTML和innerText都可以用于获取DOM元素中的内容。
我们可以这样写:
(1)使用innerText时
在JS中我们,
从而得到的运行结果为:
(2)使用innerHTML时
运行这段代码,我们可以得到
从这里来看,如果要获得单个DOM元素中间的文本节点,innerText和innerHTML
的结果是相同的,那么他们之间的不同点在哪呢?
2.innerHTML和innerText之间的区别
如果,我们这样写,当DOM元素之间包含了其他DOM节点时,我们举个简单的粒子
此时当我们用innerHTML去获得id为div-1元素的内容时,得到是的
如果使用innerText,则获得的是:
我们发现,如果使用innerHTML,获得的是根元素div内包含的所有节点,
所以获得的内容为<div>my csdn</div>hello world,当我们用innerText时,所获得的仅仅是文本节点,于是得到的内容不包含DOM节点,得到的内容为纯文本, my csdn hello world
3.总结
(1)innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
(2)innerText:
从起始位置到终止位置的内容, 但它去除Html标签
4.innerHTML和innerText在不同版本的兼容性问题
笔者在测试innerHTML和innerText的兼容性时,发现
innerText标签是不兼容Fire fox浏览器的,但是兼容除了FF浏览器以外,IE8以上,几乎
支持所有浏览器。
所以我们在使用的过程中,尽量避免使用innerText!!!!
5.innerHTML和value
对于textarea,text,password,button等表单元素,我们不能用innerHTML去获得表单元素里面的文本内容,
比如说:<button id="btn-1">提交</button>
不能使用btn1.innerHTML去获得开关的值,此时如果我们要获得表单元素的文本信息
采用的是btn1.value!!