首页 > 代码库 > innerHTML,innerText,outerHTML,outerText,value浅析

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设置,元素和其子元素都会被替换成设置的字符串!

 

innerHTML,innerText,outerHTML,outerText,value浅析