innerText、outerText的区别

lsd123 2009-01-05 01:53:00 
<div id="div"><input name="button" value="Button" type="button"><font color="green"><h2>This is a DIV!</h2></font></div>

<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">

<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">

<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">

<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">



与innerHTML不同，outerHTML包括整个标签，而不仅限于标签内部的内容。对于一个id为"testdiv"的div来说，outerHTML、innerHTML以及innerTEXT三者的区别可以通过下图展示出来：

问题:
1.这个例子看不出innerText、outerText的区别
2.在下面函数 obj.outerHTML=obj.outerHTML;//为什么能把文本框内容清空?
<input type="file" id="UpFile" runat="server" accept="image/*" onchange="ShowImage(this.value)"/>

  <input id="Button1" type="button" value="清空" class="ButtonCss" onclick="Clean();"/>



        //清空

        function Clean()

        {  

            var obj=document.getElementById("UpFile");

            obj.outerHTML=obj.outerHTML;//为什么能把文本框内容清空?

        }

...全文
1123 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
ahbool123 2009-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 lwp1493 的回复:]
第二个问题：

如果为 OuterHtml 赋新值，则当前的元素引用将不再有效，它不再反映您刚才分配的 HTML 的名称、属性及子级内容。
[/Quote]

不对吧,如果 OuterHtml 赋的是全新的值
那 <input type="file" id="file999" /> 应用 file999.outerHTML = file999.outerHTML;后
原来元素的id (file999) 变了,那我再次用document.getElementById("file999")不是null了?
「已注销」 2009-01-05
  • 打赏
  • 举报
 回复
第二个问题：

如果为 OuterHtml 赋新值，则当前的元素引用将不再有效，它不再反映您刚才分配的 HTML 的名称、属性及子级内容。
ahbool123 2009-01-05
  • 打赏
  • 举报
 回复
<div><input type="file" id="file" /></div>

如果file是空,没选择文件:
file.outerHTML的结果是 "<input type=file id=file />"
file.outerHTML = file.outerHTML 后file清空很正常,因为把a替换成a,最后还是a

如果file有值,选择了文件c:/a.txt
那么
file.outerHTML的结果是 "<input type=file id=file value="c:\a.txt" />"
这时
file.outerHTML = file.outerHTML 后,file也清空,LZ也许是对这个不太明白.
因为file控件是只读的
你用JS给file控件赋值:file.value = "c:/a.txt";是没用的,无效
所以将<input type="file" id="file" /> 替换成 "<input type=file id=file value="c:\a.txt" />" 后,
呈现给我们的依然是<input type="file" id="file" />


可以试试
<html>
<div><input type="file" id="file" value="c:\a.txt" /></div>
</html>
显示出来的是一个没有值的file

关于innerHTML,innerTEXT,outerHTML的区别,LZ可以参考

http://87cool.com/articleShow.aspx?number=52 这里解释的比较清楚

lsd123 2009-01-05
  • 打赏
  • 举报
 回复 
分享

obj.outerHTML=obj.outerHTML 的效果也可有以下函数实现(由jiang_jiajia10提供):



function clearFileInput(file){

var form=document.createElement('form');

document.body.appendChild(form);

var pos=file.nextSibling;

form.appendChild(file);

form.reset();

pos.parentNode.insertBefore(file,pos);

document.body.removeChild(form);

}
lsd123 2009-01-05
  • 打赏
  • 举报
 回复
obj.outerHTML=obj.outerHTML
我也是网上看到了,能把input type="file"左边的文本框内的值清空,但我不知道这是如何做到的,
glt3260053 2009-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 wuyq11 的回复:]
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
innerText 和outerText 在读取得时候是一样的，只是在设置的时候outerText 会连带标签一起替换成目标文本
firefox不支持innerText ，但是可以用textContent作为替代方案。

[/Quote]
学习中
jiang_jiajia10 2009-01-05
  • 打赏
  • 举报
 回复
obj.outerHTML=obj.outerHTML;你这是怎么赋值的自己给自己赋值？然后还是空值？
hy_lihuan 2009-01-05
  • 打赏
  • 举报
 回复
不清楚为什么
min_1982 2009-01-05
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 wuyq11 的回复:]
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
innerText 和outerText 在读取得时候是一样的，只是在设置的时候outerText 会连带标签一起替换成目标文本
firefox不支持innerText ，但是可以用textContent作为替代方案。
[/Quote]

就这个 自己多写几次就明白了。
lsd123 2009-01-05
  • 打赏
  • 举报
 回复
看下问题2
麻烦了
wuyq11 2009-01-05
  • 打赏
  • 举报
 回复
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
innerText 和outerText 在读取得时候是一样的，只是在设置的时候outerText 会连带标签一起替换成目标文本
firefox不支持innerText ，但是可以用textContent作为替代方案。
jiang_jiajia10 2009-01-05
  • 打赏
  • 举报
 回复 


 <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>


当您调用 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.

Fibona 2009-01-05
  • 打赏
  • 举报
 回复
innerHTML获取标签内的HTML
outerHTML获取标签及标签内的HTML

innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
正常情况下:
innerTEXT和outerTEXT都是获取标签内的文本，相同。
zhxhdean 2009-01-05
  • 打赏
  • 举报
 回复
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
html innerHTML outerHTML innerText outerText等的区别及实例汇总
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
innertext和outertext以及div
innertext和outertext以及div,在编写网页时经常用到的,很好用.
innerHTML、outerHTML、innerText、outerText的用法与区别
innerHTML、outerHTML、innerText、outerText的用法与区别
innerHTML,outerHTML,innerText,outerText的用法及区别解析
本篇主要是对innerHTML,outerHTML,innerText,outerText的用法及区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
javascript innerHTML、outerHTML、innerText、outerText的区别
主要介绍了javascript innerHTML、outerHTML、innerText、outerText的区别,本文讲解了它们的功能、使用实例、和不同之处,需要的朋友可以参考下
.NET社区

62,046

社区成员

669,048

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章