<div id="test">
<span style="color:red">test1</span> test2
</div>
在JS中可以使用：
test.
innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2
test.
innerText:
从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”,其中span标签去除了
test.
outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
完整示例：
<div id="test">
<span style="color:red">test1</span> test2
</div>
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>
特别说明：
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
注意innerHTML有自动检查语法的功能,它会把不完整的HTML代码补充完整,这点可以说是神奇,例如下面的这段脚本
<head>
<script language="javascript">
function Get(){
var tab=document.getElementById("tab")
tab.innerHTML="<table><tr>";
alert(tab.innerHTML);
}
</script>
</head>
<body>
<p id="tab" onclick="Get()">
请点我啦!!!
</p>
</body>
</html>
还有一种情况，设置的时候:
HTML:<DIV ALIGN="left" id="div"><p>hello world!!!</p>ddddd</DIV>
div.innerText = "<p>abcdef</p>";
结果为:
<DIV ALIGN="left" id="div"><p>abcdef</p></DIV>
此是对<p></p>不做HTML解析 页面直接显示为<p>abcdef</p>
div.innerHTML = "<p>abcdef</p>";
结果为:
<DIV ALIGN="left" id="div"><p>abcdef</p></DIV>
此是对<p></p>会做HTML解析 页面只显示abcdef
div.outerText = "<p>abcdef</p>";
结果为:
<p>abcdef</p>
此是对<p></p>不做HTML解析 将以前的对象标签给替换掉了,
这个时候是操纵是div本身 页面直接显示为<p>abcdef</p>
div.outerHTML = "<p>abcdef</p>";
结果为:
<p>abcdef</p>
此是对<p></p>会做HTML解析
这个时候是操纵也是div本身
页面只显示abcdef
最后,
outerText和
innerText在取得数据的时候没有区别,而在设置值的时候就有区别
请记住inner操纵的是对象里面的东西
outer操纵的是对象本身,也就是要比inner大一级吧,
innerHTML：得出调用该方法的节点下的HTML代码，但不包括该节点本身的HTML代码
outerHTML:得出调用该方法的节点及该节点下的HTML代码
分享到：
相关推荐
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
innerHTML、outerHTML、innerText、outerText的用法与区别.doc
innerHTML-outerHTML-innerTEXT
js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，outerHTML的用法及区别吧。
我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。
本篇主要是对innerHTML,outerHTML,innerText,outerText的用法及区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
innerHTML，outerHTML,innerTEXT三者之间的区别
上例中的test[removed]的值也就是“<span xss=removed>test1</span> test2 ”。... test.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。 上例中的text.outerHTML的值也就是<div i
主要介绍了javascript innerHTML、outerHTML、innerText、outerText的区别,本文讲解了它们的功能、使用实例、和不同之处,需要的朋友可以参考下
innerHTML属性用来读取或设置某个节点内的HTML代码。 outerHTML属性用来读取或设置HTML代码时，会把节点本身包括在内。 textContent属性用来读取或设置节点包含的文本内容。 innerText属性和outerText属性在读取元素...
document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的； 1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，...
<a>innerHTML,innerText,outerHTML,outeterText <input type =button onclick =inner() value=inner /> <input type =button onclick =outer() value=outer /> js源码如下: function...
易语言DOM操作源码,DOM操作,清除script,get,set,写空文档,URLUnencoded,write,cookie,domain,url,title,head,body,documentElement,clear,getElementById,getElementsByTagName,...id,className,innerText,outerHTML,
非常小巧实用的网页解析类，在delphi 10.2下编译通过，主要方法：getElementByid getElementsByTagName(aTag : string) getElementByTagNameAndFlag getElementsByClassName 标签主要属性：innerText ， innerHTML ...