outerHTML与innerHTML的区别-优快云博客

[img]http://dl.iteye.com/upload/attachment/426580/f2a5ca91-33c5-3034-b06b-301ea2ea7dac.jpg[/img]

图例分析outerHTML的用法——与innerHTML不同，outerHTML包括整个标签，而不仅限于标签内部的内容。对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过右图展示出来。
　　outerHTML可以用来更改或获取元素内所有的html和文本内容，包含引用该方法元素自身的标签．
　　innerHTML是用来获取元素内的html内容和文本．
　　innerTEXT只获取元素内的文本内容，html标签将被忽略．
　　以上三者方法类似大家不要混淆．注意outerHTML不是W3C标准，且只支持IE浏览器．
　　示例代码（可直接复制后转存执行）:　
　　<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" onclick="innerHTMLDemo()">innerHTML效果.</li>
　　<li id="test_id2" onclick="innerTextDemo()">innerText效果.</li>
　　<li id="test_id3" onclick="outerHTMLDemo()">outerHTML效果.</li>
　　<li id="test_id4" onclick="outerTextDemo()">outerText效果.</li>
　　</ul>
　　</body>
　　</html>