<html>
<head>
<title>A test for innerText, outerText method</title>
<script language='javascript'>
<!--
function getInnerText(objectID){
var divTextObject=document.getElementById(objectID);
if(!divTextObject){
alert("innerText(): The "+objectID+" not found.");
}else{
alert("innerText(): "+divTextObject.innerText);
}
}
function getOuterText(objectID){
var divTextObject=document.getElementById(objectID);
if(!divTextObject){
alert("outerText(): The "+objectID+" not found.");
}else{
alert("outerText(): "+divTextObject.innerText);
}
}
function getInnerHTML(objectID){
var divTextObject=document.getElementById(objectID);
if(!divTextObject){
alert("innerHTML(): The "+objectID+" not found.");
}else{
alert("innerHTML(): "+divTextObject.innerHTML);
}
}
function getOuterHTML(objectID){
var divTextObject=document.getElementById(objectID);
if(!divTextObject){
alert("outerHTML(): The "+objectID+" not found.");
}else{
alert("outerHTML(): "+divTextObject.outerHTML);
}
}
/**********************************************************************************/
var textValue="Hellin love Linda for ever."
var htmlValue="<span> Hellin <button>love Linda </button></span>for ever.";
function change_outerHTML(objectID){
var divTextObject=document.getElementById(objectID);
if(!divTextObject){
alert("outerHTML(): The "+objectID+" not found.");
}else{
divTextObject.outerHTML=htmlValue;
}
}
function change_innerHTML(objectID){
var divTextObject=document.getElementById(objectID);
if(!divTextObject){
alert("innerHTML(): The "+objectID+" not found.");
}else{
divTextObject.innerHTML=htmlValue;
}
}
function change_outerText(objectID){
var divTextObject=document.getElementById(objectID);
if(!divTextObject){
alert("outerText(): The "+objectID+" not found.");
}else{
divTextObject.outerText=textValue;
}
}
function change_innerText(objectID){
var divTextObject=document.getElementById(objectID);
if(!divTextObject){
alert("innerText(): The "+objectID+" not found.");
}else{
divTextObject.innerText=textValue;
}
}
-->
</script>
</head>
<body>
<p>
<div id='divText' >Hello, <button>Hellin Zhang</button></div>
</p>
<br/>
<input name="testButton" value="innerHTML" type="button" OnClick="getInnerHTML('divText');">
<input name="testButton" value="outerHTML" type="button" OnClick="getOuterHTML('divText');">
<input name="testButton" value="innerText" type="button" OnClick="getInnerText('divText');">
<input name="testButton" value="outerText" type="button" OnClick="getOuterText('divText');">
<br/><br/><br/><br/>
<input name="testButton" value="change_innerHTML" type="button" OnClick="change_innerHTML('divText');">
<input name="testButton" value="change_outerHTML" type="button" OnClick="change_outerHTML('divText');">
<br/>
<input name="testButton" value="change_innerText" type="button" OnClick="change_innerText('divText');">
<input name="testButton" value="change_outerText" type="button" OnClick="change_outerText('divText');">
</body>
</html>
请您先下载运行并参考作者写的例子.
<div id='divText' >Hello, <button>Hellin Zhang</button></div>
outerText:
当您调用 document.getElementById('divText').outerText 属性时, 理论上是
获得开始标签(start tag)”<div id='div1' >” 和“</div>之间所有的 text object的text value, 但是必须明确此时的操作也饱含了自身即 “div” object .所以本例读取值 Hellin, Hello world! 这与innerText 没有什么区别.
如果你执行执行 document.getElementById(''divText' ').outerText="Hellin love Linda for ever.";那么执行之后的结果是<div id='divText' >Hello, <button>Hellin Zhang</button></div>变成了 text object (即“Hellin love Linda for ever.”). 换句话说div 这个tag 没了, 而被你的一个文档对象”Hellin love Linda for ever.”给换掉了.
innerText
只能工作在 tag object 的内部即开始标签(start tag)”<div id='div1' >” 和“</div>之间所有的 text object的 text value ,但是它一定不包括自身对象,这里的inner就是这个含义. 如果您只是读取 text objext 的 text value, 那么用 innerText和outerText是等效的,它不同于innerHTML和outerHTML.
当您写即你执行 document.getElementById('div1').innerText="Hellin love Linda for ever.";后<div id='divText' >Hello, <button>Hellin Zhang</button></div>变成<div id='divText' > Hellin love Linda for ever.</div>, div object 并没有销毁.
换句话说, inner操作的是tag内部的对象, outer 不仅操作内部对象也包含了本身对象.读这些属性值的过程中,可能没有区别,但是赋值操作区别可就大了.
同理 innerHTML, outerHTML. 只不过它们操作的不是text而是HTML.
注意: W3C 只支持innerHTML. 其他都是微软的规定.(outerHTML,outerText,innerText只有微软的IE 好使, 其他浏览器不好用(firefox, mozilla等),必须用其他方法实现)
分享到：
相关推荐
innertext和outertext以及div,在编写网页时经常用到的,很好用.
innerHTML、outerHTML、innerText、outerText的用法与区别
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
本篇主要是对innerHTML,outerHTML,innerText,outerText的用法及区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
主要介绍了javascript innerHTML、outerHTML、innerText、outerText的区别,本文讲解了它们的功能、使用实例、和不同之处,需要的朋友可以参考下
document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的； ...3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容...innerText和outerText在
你不知道的outerText,innerText 区别说明
innerText属性和outerText属性在读取元素节点的文本内容时，得到的值是不一样的。它们的不同之处在于设置一个节点的文本属性时，outerText属性会使得原来的元素节点被文本节点替换掉。注意，innerText是非标准属性，...
我们常常需要使用另外一些对象的属性来实现动态改变其中的文本,它们就是：innerText，outerText，innerHTML，outerHTML，千万要注意它们的大小写，因为错一点您就得不到预期的效果了。
textContent，innerText，outerText，textNode.data工程化JS JS Regenerator运行时同步网络包 webpack打包形成的模块结果分析样式加载器，css加载器，较少加载器，URL加载器样式文件，图片文字文件处理摇树初步组件...
非常小巧实用的网页解析类，在delphi 10.2下编译通过，主要方法：getElementByid getElementsByTagName(aTag : string) getElementByTagNameAndFlag getElementsByClassName 标签主要属性：innerText ， innerHTML ...
document.all document.all不是所有浏览器都能识别，要写出更通用的代码，最好还是通过id来得到，使用document.getElementById(…) element.outerText, element.innerText, element.outerHTML，element[removed] ...
Most users will only want to use the innerText/innerHTML and outerText/outerHTML properties and methods discussed previously. However, there is some more advanced text ...
• 12.15.htm innerText、outerText、outerHTML属性 • 12.16.htm document.all[] 第13章（\第13章） • 13.1.htm HTML对象模型 • 13.2.htm DHTML对象模型 • 13.3....
• 12.15.htm innerText、outerText、outerHTML属性 • 12.16.htm document.all[] 第13章（\第13章） • 13.1.htm HTML对象模型 • 13.2.htm DHTML对象模型 • 13.3....
innerText(IE)、textContent(FF)、innerHTML 26 outerText、outerHTML(少用) 26 value属性获取表单节点内容 26 (3) 访问节点的样式 27 使用节点对象的style属性对象改变样式 27 使用className设置...