[转]javascript innerHTML、outerHTML、innerText、outerText的区别

最新推荐文章于 2024-10-02 05:39:15 发布

aidenliu

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量499

点赞数

分类专栏： Javascript 文章标签： javascript button html input 正则表达式 div

Javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

下面的内容是网上找的，看完之后我的理解就是inner是指标签内的内容（不包括标签对象本身），outer是指标签对象本身及其标签里面的内容（包括标签对象本身）。

1、功能讲解:
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
2、示例
a:
<html>
<head>
<title>Demo</title>
<style> </style>
<script language="JavaScript">
//.innerHTML
function innerHTMLDemo()
{
test_id1.innerHTML="<i><u>设置或获取位于对象起始和结束标签内的 HTML.</u></i>";
}
//.innerText
function innerTextDemo()
{
test_id2.innerText="<i><u>设置或获取位于对象起始和结束标签内的文本.</u></i>";
}
//.outerHTML
function outerHTMLDemo()
{
test_id3.outerHTML="<i><u>设置或获取对象及其内容的 HTML 形式.</u></i>";
}
//.outerText
function outerTextDemo()
{
test_id4.outerText="<i><u>设置(包括标签)或获取(不包括标签)对象的文本.</u></i>";
}
</script>
</head>
<body>
<ul>
<li id="test_id1" οnclick="innerHTMLDemo()">innerHTML效果.</li>
<li id="test_id2" οnclick="innerTextDemo()">innerText效果.</li>
<li id="test_id3" οnclick="outerHTMLDemo()">outerHTML效果.</li>
<li id="test_id4" οnclick="outerTextDemo()">outerText效果.</li>
</ul>
</body>
</html>

b:
<div id="div">
<input name="button" value="Button" type="button"><font color="green"><h2>This is a DIV!</h2></font></div>

<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">

3、不同之处:
简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：
1）、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
2)、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

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

firefox不支持innerText ，但是可以用textContent作为替代方案。代码如下：
if(document.all){
document.getElementById('myid').innerText = "text";
} else{
document.getElementById('myid').textContent = "text";
}