innerText、outerText、innerHTML、outerHTML的区别与使用

maoting

浏览: 47385 次
性别:
来自: 北京

最近访客更多访客>>

iy2017

eyeti123

小动物不困

吴小帅啊

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

innerText、outerText、innerHTML、outerHTML的区别与使用

1、区别描述

innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本

innerText和outerText在获取时是相同效果，但在设置时，innerText仅设置标签内的文本，而outerText设置包括标签在内的文本。

2、示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>innerText、outerText、innerHTML、outerHTML的区别与使用</title>
	</head>
	<body>
		<div name="outer">
			<div id="test" style="background:#000;color:white;width:400px;height:70px;">div
				<h3>背景部分</h3>
			</div>
			<div id="test1" style="background:#00c;color:white;width:400px;height:50px;">
				<h1>innerHTML</h1>
			</div>
			<div id="test2" style="background:#10f;color:white;width:400px;height:50px;">
				<h1>outerHTML</h1>
			</div>
			<div id="test3" style="background:#2cf;color:white;width:400px;height:50px;">
				<h1>innerText</h1>
			</div>
			<div id="test4" style="background:#47f;color:white;width:400px;height:50px;">
				<h1>outerText</h1>
			</div>
			<div id="test5" style="background:#6af;color:white;width:400px;height:50px;">
				<h1>textContent</h1>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function test() {
			var idTest = document.getElementById("test");
			var idTest1 = document.getElementById("test1");
			var idTest2 = document.getElementById("test2");
			var idTest3 = document.getElementById("test3");
			var idTest4 = document.getElementById("test4");
			var idTest5 = document.getElementById("test5");
			var result = document.getElementById("result");
			if("innerHTML" in idTest) {
				console.log("innerHTML: " + idTest.innerHTML);
				idTest1.innerHTML = "<font color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
			}
			if("outerHTML" in idTest) {
				console.log("outerHTML: " + idTest.outerHTML);
				idTest2.outerHTML = "<font color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
			}
			if("innerText" in idTest) {
				console.log("innerText: " + idTest.innerText);
				idTest3.innerText = "<font color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
			}
			if("outerText" in idTest) {
				console.log("outerText: " + idTest.outerText);
				idTest4.outerText = "<font color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
			}
			if("textContent" in idTest) {
				console.log("textContent: " + idTest.textContent);
				idTest5.textContent = "<font color=red><i><u>设置或获取对象及其内容的 HTML 形式.</u></i></font>";
			}
		}

		test();
	</script>
</html>

3、不同之处

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

4、运行结果

IE8

Firefox

Chrome

Safari

IE9

5、兼容性总结：

参考： http://tech.cncms.com/sheji/js/111123.html

IE下.innerHTML将左右空格去除，得到的nodeType === 1

<div id="inn">
	<div>
		123
		223
		323
	</div>
</div>
<script>
	var div = document.getElementById("inn");
	console.log(div.childNodes.length);
	console.log(div.innerHTML);
	console.log(div.childNodes[0]);
	console.log(div.childNodes[1]);
	console.log(div.childNodes[2]);
	console.log(div.childNodes[0].innerHTML);
	console.log(div.childNodes[0].nodeType);
</script>