innerText、outerText、innerHTML、outerHTML的差别与使用-HTML教程-爱易网页

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

日期：2014-05-17　浏览次数：20791 次

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