<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设置...