日期:2014-05-17 浏览次数:20799 次
?
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
?