innerHTML、innerText、outerHTML、outerText的区别

阅读更多

书上是这样说的：

innerHTML 设置或获取位于对象起始和结束标签内的 HTML

outerHTML 设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

outerText 设置(包括标签)或获取(不包括标签)对象的文本

 

没有例子，你明白什么意思吗，反正我没明白，下面我们举例来说吧：

 

如：

原html为：

替换前

 

1.innerHTML

运行脚本：

原来的html变为：

替换后

2.outerHTML

运行脚本：

原html变为：

替换后

 

3.innerText

运行脚本：

原html变为：

>div<替换后>/div<

 

4.outerText

运行脚本：

原html变为：

>div<替换后>/div<

 

不做实验不会明白什么意思，innerHTML和outHTML都是会将HTML标签一起读取或设置，但innerText和outerText在读取的时候会去掉HTML标签，设置的时候如果字符中包含HTML标签，将会作为特殊字符做替换处理。这就是这几个家伙的真正区别。