innerText 和outerText 的区别

最新推荐文章于 2023-08-10 10:36:16 发布
最新推荐文章于 2023-08-10 10:36:16 发布
阅读量1.9k 收藏
点赞数
分类专栏： html 文章标签： button function object div input mozilla

 <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等),必须用其他方法实现)

溺水的鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript innerHTML、outerHTML、innerText、outerText的区别
10-30
主要介绍了javascript innerHTML、outerHTML、innerText、outerText的区别,本文讲解了它们的功能、使用实例、和不同之处,需要的朋友可以参考下
outerText和innerText的区别。
无尽的代码--------mandolin`s coding life
06-11 2807
    对于DOM对象的这两个属性，初学者往往会感到疑惑，因为通过它们所获得的值没有任何区别。　    实际上，只要理解了它们各自的含义，就不难辨别了。    某元素的innerText指的是由其元素的开始标签和结束标签所包含的那一段HTML代码被去除格式后的纯文本。       outerText与其不同的是它包含元素的开始和结束标签。　    在取值的时候两者没有任何区别，但在赋值的时候就很容
innerText、outerText、innerHTML、outerHTML的区别与使用
骆驼草的家园
11-01 155
innerText、outerText、innerHTML、outerHTML的区别与使用   1、区别描述 innerHTML 设置或获取位于对象起始和结束标签内的 HTMLouterHTML 设置或获取对象及其内容的 HTML 形式innerText 设置或获取位于对象起始和结束标签内的文本outerText 设置(包括标签)或获取(不包括标签)对象的文本 innerText和oute...
innerText、outerText与innerHTML、outerHTML
weixin_56505845的博客
04-27 517
innerText、outerText与innerHTML、outerHTML 1、取值 innerText和outerText取值都是对象起始和结束标签内部的文本内容，而innerHTML取值是对象起始和结束标签内部的html，不包括对象本身的起始标签和结束标签，outerHTML取值是也是html，但是包括对象本身的起始标签和结束标签，具体如下： <div id="out">这是div文本 <span>这是span文本</span> </div> l
JavaScript之innerHTML和outerHTML，innerText和outerText
最新发布
qq_53058639的博客
08-10 523
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（现在也适应chrome浏览器），因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签。--申明当前网页的编码集UTF-8-->--编辑器的名称-->
innerHTML,outerHTML,innerText,outerText的用法及区别解析
09-04
本篇主要是对innerHTML,outerHTML,innerText,outerText的用法及区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
innertext和outertext以及div
12-10
innertext和outertext以及div,在编写网页时经常用到的,很好用.
你不知道的outerText,innerText 区别说明
09-25
你不知道的outerText,innerText 区别说明
innerHTML、outerHTML、innerText、outerText的区别及兼容性问题
热门推荐
HTMl5自由者
04-13 1万+
看了很多文章关于， 关于innerHTML、outerHTML、innerText、outerText的区别，还是很模糊的一个印象，所以自己总结下这xie
innerHTML、outerHTML、innerText、outerText的用法与区别
05-09
innerHTML、outerHTML、innerText、outerText的用法与区别.doc
innerHTML、innerText、outerHTML、outerText区别
菜鸟程序员成长路
10-24 6452
1、区别： （1） innerHTML 设置或获取位于对象起始和结束标签内的 HTML，例子： &lt;div id="div1"&gt;hello world&lt;/div&gt; &lt;div id="div2"&gt; &lt;span&gt;BEI&lt;/span&gt; &lt;p&gt;JING&lt;/p&gt; &lt;/
java中outer和inner_innerText 和outerText 的区别
weixin_39610678的博客
02-25 439
A test for innerText, outerText methodHello, Hellin Zhang请您先下载运行并参考作者写的例子.Hello, Hellin ZhangouterText:当您调用 document.getElementById('divText').outerText 属性时, 理论上是获得开始标签(start tag)”” 和“之间所有的 text objec...
innerHTML与innerText与outHTML与outText 的区别。
ZXH0122的博客
10-22 846
innerHTML，baiinnerText和outerHTML，outerText的区别如下： 1）innerHTML 设置或获du取位于对象起始和结束zhi标dao签内的 HTML内容 2）innerText 设置或获取位于对象起始和结束标签内的文本 3）outerHTML设置或获取对象及其内容的 HTML 形式 4）outerText 设置(包括标签)或获取(不包括标签)对象的文本 重点强调指出： innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与o
javaScript中innerHTML,innerText,outerHTML,outerText的区别
qq_40435659的博客
09-05 260
开头说下innerText和outerText只在chrome浏览器中有效 定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML，包括标签。 来看代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;m
innertext和innerhtml区别
03-16
`innerText`和`innerHTML`都是用来获取或设置HTML元素中的文本内容的属性。 `innerText`只能获取或设置文本内容，不能读取或设置HTML标签。 `innerHTML`可以获取或设置文本内容和HTML标签。 例如，如果一个元素的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值