outerText、innerText 、outerHTML、innerHTML

 

首先，看我們的html定義

  

 <div id="diva">    <div id="div1">     <a>innerHTML,innerText,outerHTML,outeterText</a>     <input type ="button"  onclick ="inner()" value="inner"  />     <input type ="button" onclick ="outer()" value="outer" />    </div>      </div>

JS定義：

function inner() {            var html = document.getElementById("diva").innerHTML;            var text = document.getElementById("diva").outerHTML;            var innerTxt = document.getElementById("diva").innerText;                        alert(html); //顯示內容不包含<div id="diva"></div>            alert(text); //顯示內容包含<div id="diva"></div>            alert(innerTxt);        }

輸出結果為：

 

JS指令碼2：

function outer() {            document.getElementById("div1").innerText = "innerText"; //將div1包含的內容替換為innerText            var oHtml = document.getElementById("diva").innerText;            var text = document.getElementById("diva").outerHTML;             alert(oHtml + text); //顯示結果如                        document.getElementById("div1").outerText = "outerText"; //將<div id="div1"></div>和div包含的內容替換為outerText            var oText = document.getElementById("diva").outerText;            text = document.getElementById("diva").outerHTML;            alert(oText + text); //顯示結果如            document.getElementById("diva").outerHTML = "outerText";            window.alert(document.getElementById("diva").outerHTML);        }

輸出結果：

注意:innerText,outerText在取值的時候沒有區別，賦值的時候不一樣

但是innerHTML和innerText在取值的時候也是不一樣的