innerHTML,outerHTML,innerText,outerText的用法及區別解析

<p><div id="div" style="background-color:#ff9966;border:1px #ff0000 dashed;"><span>這是一個層</span></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);">

<script language="javascript">

function changeb(obj)

{

obj.outerHTML = "<input type='text' value='設定物件內的HTML，包含標籤' style='width:200px;'></input>"

}

function changea(obj)

{

obj.innerHTML = "<b>設定物件內的HTML</b>"

}

</script>

<br><br>

innerHTML取得標籤內的HTML<br>

outerHTML取得標籤及標籤內的HTML<br>

innerTEXT和outerTEXT都是取得標籤內的文本，相同。 <br>

<br><br>

<div id="div1" style="background-color:#ff9966;border:1px #ff0000 dashed;">這是一個層</div>

<br>

<input name="innerHTML1" value="innerHTML" type="button" OnClick="changea(div1)">

<input name="outerHTML1" value="outerHTML" type="button" OnClick="changeb(div1)">

<input name="innerText1" value="innerText" type="button" OnClick="div1.innerText='使用innerText取代文字'">

<input name="outerText1" value="outerText" type="button" OnClick="div1.outerText='使用outerText會連帶標籤一起替換成目標文本，層也替換掉了'">

<br>

<p>

innerHTML設定標籤內的HTML<br>

outerHTML設定標籤及標籤內的HTML<br>

innerTEXT設定簽內的文字<br>

innerTEXT設定簽內的文本，包括標籤一起替換。 <br>

</p>

innerHTML 設定或取得位於物件起始和結束標籤內的HTML <br>

outerHTML 設定或取得物件及其內容的HTML 形式<br>

innerText 設定或取得位於物件起始和結束標籤內的文字<br>

outerText 設定(包括標籤)或取得(不包括標籤)物件的文字<br><br>