innerText、outerText的区别

<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;//为什么能把文本框内容清空?
        }

解决方案 »

  1.   

    innerHTML 设置或获取位于对象起始和结束标签内的 HTML 
    outerHTML 设置或获取对象及其内容的 HTML 形式 
    innerText 设置或获取位于对象起始和结束标签内的文本 
    outerText 设置(包括标签)或获取(不包括标签)对象的文本 
      

  2.   

    innerHTML获取标签内的HTML
    outerHTML获取标签及标签内的HTMLinnerText 设置或获取位于对象起始和结束标签内的文本 
    outerText 设置(包括标签)或获取(不包括标签)对象的文本 
    正常情况下:
    innerTEXT和outerTEXT都是获取标签内的文本，相同。
      

  3.   


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

  4.   

    innerHTML 设置或获取位于对象起始和结束标签内的 HTML
    outerHTML 设置或获取对象及其内容的 HTML 形式
    innerText 设置或获取位于对象起始和结束标签内的文本
    outerText 设置(包括标签)或获取(不包括标签)对象的文本
    innerText 和outerText 在读取得时候是一样的，只是在设置的时候outerText 会连带标签一起替换成目标文本
    firefox不支持innerText ，但是可以用textContent作为替代方案。
      

  5.   

    obj.outerHTML=obj.outerHTML;你这是怎么赋值的自己给自己赋值？然后还是空值？
      

  6.   

    obj.outerHTML=obj.outerHTML
    我也是网上看到了,能把input type="file"左边的文本框内的值清空,但我不知道这是如何做到的,
      

  7.   

    分享
    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);
    }
      

  8.   

    <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  这里解释的比较清楚
      

  9.   

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

  10.   


    不对吧,如果 OuterHtml 赋的是全新的值
    那 <input type="file" id="file999" /> 应用 file999.outerHTML = file999.outerHTML;后
    原来元素的id (file999) 变了,那我再次用document.getElementById("file999")不是null了?