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

        }