innerHTML，innerText，outerHTML，outerText，value浅析

首先是一个例子:

<div id= "aa">0<br/>0<span>11</span>22</div>
<input type="button" onclick= "a()"/>

console.log(document.getElementById("aa").innerHTML);
console.log(document.getElementById("aa").innerText);
console.log(document.getElementById("aa").outerHTML);    
console.log(document.getElementById("aa").outerText);

输出:

0<br>0<span>11</span>22
0
01122
<div id="aa">0<br>0<span>11</span>22</div>
0
01122

注解:

获取:

这四个属性用于input，textarea中获取的都是空值，得用value来获取！

innerHTML: 元素内部html内容，从开始标签的>到结束标签的<（不包括标签本身）

innerText:剔除标签后的内容，从开始标签的>到结束标签的<（不包括标签本身）字符串类型，换行符会保留

低版本ff不支持innerText，但是可以用textContent作为替代方案

outerHTML:包括元素本身的html内容

outerText:包括元素本身的html文本，一般情况下与innerText一致

----------------------------------------------------------------------------------------------------------------

设置:

以上属性均可设置

使用innerText设置，元素内部的元素会被替换成设置的字符串！

使用outerText设置，元素和其子元素都会被替换成设置的字符串！

 

转载于:https://www.cnblogs.com/yanze/p/5988639.html