JS中innerHTML outerHTML innerText outerText 和 value

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改为innerTextalert出的结果是：FirstNameLastName

outerText

设置(包括标签)或获取(不包括标签)对象的文本按照上面的的案例，将innerHTML改为outerTextalert出的结果是：FirstNameLastName

value

属性可设置或返回密码域的默认值。获取文本框的值按照上面的的案例，将innerHTML改为valuealert出的结果是：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>