js基础
在这篇blog上,我想整理清楚JS中innerHTML outerHTML innerText outerText 和 value的区别。
innerHTML
属性设置或返回该标签内的HTML。也就是从对象的起始位置到终止位置的全部内容,包括Html标签
<script type="text/javascript">
function getInnerHtml(){
alert(document.getElementById("tr1").innerHTML);
}
</script>
<table border="1">
<tr id="tr1">
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr id="tr2">
<td>Mike</td>
<td>Linda</td>
</tr>
</table>
<br />
<input type="button" onclick="getInnerHtml()" value="alert innerHTML of table row" />
alert出的内容是:
<th>FirstName</th>
<th>LastName</th>
outerHTML
属性设置或返回该标签及标签内的HTML。也就是从对象的该标签起始到终止位置的全部内容,包括Html标签
按照上面的案例,将innerHTML改为outerHTML,则,输出的结果会包括本身的标签在内
alert出的是:
<tr id="tr1">
<th>FirstName</th>
<th>LastName</th>
</tr>
innerText
从起始位置到终止位置的内容,但它去除html标签。(只能在IE和chrome下使用)
按照上面的的案例,将innerHTML改为innerText
alert出的结果是:
FirstNameLastName
outerText
设置(包括标签)或获取(不包括标签)对象的文本
按照上面的的案例,将innerHTML改为outerText
alert出的结果是:
FirstNameLastName
value
属性可设置或返回密码域的默认值。获取文本框的值
按照上面的的案例,将innerHTML改为value
alert出的结果是:
Undefined
特别说明
innerHTML是符合W3C标准的属性,而innerText、outerText、outerHTML只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>