发新话题
打印

innerHTML、innerText、outerHTML、outerText的区别

innerHTML、innerText、outerHTML、outerText的区别

书上是这样说的:

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

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

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

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



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



如:

原html为:

<div id="test"><span>替换前</span></div>



1.innerHTML

运行脚本:

<script type="text/javascript" lang="javascript">

document.getElementById('test').innerHTML = "<div>替换后</div>";

</script>

原来的html变为:

<div id="test"><div>替换后</div></div>

2.outerHTML

运行脚本:

<script type="text/javascript" lang="javascript">

document.getElementById('test').outerHTML = "<div>替换后</div>";

</script>

原html变为:

<div>替换后</div>



3.innerText

运行脚本:

<script type="text/javascript" lang="javascript">

document.getElementById('test').innerText= "<div>替换后</div>";

</script>

原html变为:

<div id="test">&gt;div&lt;替换后&gt;/div&lt;</div>



4.outerText

运行脚本:

<script type="text/javascript" lang="javascript">

document.getElementById('test').outerText= "<div>替换后</div>";

</script>

原html变为:

&gt;div&lt;替换后&gt;/div&lt;



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

TOP

发新话题