首页 > 代码库 > 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浅析