DOM中的outerHTML,innerHTML,outerText,innerText的区别

最新推荐文章于 2022-04-24 09:55:46 发布

转载最新推荐文章于 2022-04-24 09:55:46 发布 · 608 阅读

HTML/XML 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了HTML与innerText在处理网页元素内容时的不同特性，包括解析内容、标签范围以及如何在不同浏览器环境下正确使用这些属性。通过实例代码演示，帮助开发者在实际项目中做出合适的选择。

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：

1)、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

特别说明：
　　 innerHTML是符合W3C标准的属性，而 innerText、outerText、outerHTML只适用于 IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a href="javas cript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

转自：http://blog.163.com/yw_0721/blog/static/7164579720102932157759/

代码练习： (ie生效，ff中只有innerHTML是对的)

<script   type="text/javascript">      
function   getinnerHTML()      
{      
var   e=window.document.getElementById("testdiv");      
alert(e.innerHTML);      //<p>白云</p>
}      
function   getouterHTML()      
{      
var   e=window.document.getElementById("testdiv");      
alert(e.outerHTML);      //<div id="testdiv"><p>白云</p></div>
}  
function   getinnerText()      
{      
var   e=window.document.getElementById("testdiv");      
alert(e.innerText);      //白云
} 
function   getouterText()      
{      
var   e=window.document.getElementById("testdiv");      
alert(e.outerText);      //白云
}     
</script>      

<div id="testdiv"><p>白云</p></div>
<p>      
    <input type="button"  name="Submit2" value="innerHTML" onClick="getinnerHTML()">
    <input type="button"  name="Submit2" value="outerHTML" onClick="getouterHTML()">
    <input type="button"  name="Submit2" value="innerHTML" onClick="getinnerText()">
    <input type="button"  name="Submit2" value="innerHTML" onClick="getouterText()">
</p>