首先,看我们的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在取值的时候也是不一样的