码迷,mamicode.com
首页 > Web开发 > 详细

innerHTML,innerText,outerHTML,outerText,value浅析

时间:2016-10-22 23:44:02      阅读:325      评论:0      收藏:0      [点我收藏+]

标签:nbsp   style   情况   content   属性   html   设置   字符   注解   

首先是一个例子:

<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浅析

标签:nbsp   style   情况   content   属性   html   设置   字符   注解   

原文地址:http://www.cnblogs.com/yanze/p/5988639.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!